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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
JS的数组迭代方法
Feb 05 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 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下封装较好的数字分页方法
2010/11/23 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
js对象的比较
2011/02/26 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
Bootstrap模态窗口源码解析
2017/02/08 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
vue filters的使用详解
2018/06/11 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python的几种开发工具介绍
2007/03/07 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
教导处工作制度
2014/01/18 职场文书
捐赠仪式主持词
2014/03/19 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
信访维稳承诺书
2015/05/04 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL