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中的Document文档对象
Jan 16 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
Mar 18 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
vue2实现provide inject传递响应式
May 21 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之第六天
2006/10/09 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
Django中的Signal代码详解
2018/02/05 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
python使用Matplotlib画饼图
2018/09/25 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
入党自我评价优缺点
2014/01/25 职场文书
双方协议书
2014/04/22 职场文书
希特勒的演讲稿
2014/05/23 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
详解Js模块化的作用原理和方案
2021/04/29 Javascript
JS数组去重详情
2021/11/07 Javascript