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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
使用js显示当前时间示例
Mar 02 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
javaScript基础语法介绍
Feb 28 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
微信小程序 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中数组的三种排序方法分享
2012/05/07 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
javascript常用的正则表达式实例
2014/05/15 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
2019/06/10 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python实现自动更换ip的方法
2015/05/05 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
聊城大学毕业生自荐书
2014/02/01 职场文书
大学生校园创业计划书
2014/02/08 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
趣味运动会策划方案
2014/06/02 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
监察建议书
2015/02/04 职场文书
销售开票员岗位职责
2015/04/15 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
大学生读书笔记大全
2015/07/01 职场文书
话题作文之呼唤
2019/12/18 职场文书
Python类方法总结讲解
2021/07/26 Python