JavaScript解析JSON数据示例


Posted in Javascript onJuly 16, 2019

本文实例讲述了JavaScript解析JSON数据。分享给大家供大家参考,具体如下:

JSON数据是一种常用的数据格式,解析方式也比较简单,特别是由于JavaScript原生就支持JSON,所以JavaScript能够更好的解析JSON。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解析JSON</title>
<script>
// 开始解析
function startParse()
{
      // ,{"字段2":{"地址2":"数据2"}}{"字段3":{"地址3":"数据3"}}
      var jsonStr = '[{\"字段1\":{\"地址1\":\"数据1\"}},{\"字段2\":{\"地址2\":\"数据2\"}},{\"字段3\":{\"地址3\":\"数据3\"}}]';
      var json = JSON.parse(jsonStr); // 将字符串转换为JSON对象
      // 循环遍历获取key -- value
      for(var i = 0; i < json.length; i++){
        // {"字段1":{"地址1":"数据1"}}
        var itemJson = json[i];
        // 再次遍历获取
        for(var key in itemJson){
          console.log(key);
          // {"地址2":"数据2"}
          var childItem = itemJson[key];
          // 再次遍历获取
          for (var keyItem in childItem) {
            console.log(keyItem + " -- " + childItem[keyItem]);
          }
        }
      }
}
</script>
</head>
<body>
<p>数据:</p>
<p>[{'字段1':{'地址1':'数据1'}},{'字段2':{'地址2':'数据2'}}{'字段3':{'地址3':'数据3'}}]</p>
<button type="button" onclick="startParse()">开始解析</button>
</body>
</html>

运行结果:

JavaScript解析JSON数据示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
javascript 简练的几个函数
Aug 29 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
微信小程序 Storage更新详解
Jul 16 #Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 #Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
JS实现的排列组合算法示例
Jul 16 #Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 #Javascript
详解微信小程序支付流程与梳理
Jul 16 #Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 #Javascript
You might like
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
关于PHP开发的9条建议
2015/07/27 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
在Django的上下文中设置变量的方法
2015/07/20 Python
详解Python编程中包的概念与管理
2015/10/16 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python多进程间通信代码实例
2019/09/30 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
力学专业毕业生自荐信
2013/11/17 职场文书
日语专业个人的求职信
2013/12/03 职场文书
合作与交流自我评价
2015/03/09 职场文书