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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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获取目标函数执行时间示例
2014/03/04 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
办理信用卡工作证明
2014/01/11 职场文书
七年级英语教学反思
2014/01/15 职场文书
网络工程师职业规划
2014/02/10 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
创文明城市标语
2014/06/16 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
工人先进事迹材料
2014/12/26 职场文书
2015年司法所工作总结
2015/04/27 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
mysql脏页是什么
2021/07/26 MySQL