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 相关文章推荐
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
详解Vue之父子组件传值
Apr 01 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JS Math对象与Math方法实例小结
Jul 05 Javascript
js消除图片小游戏代码
Dec 11 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
JS实现鼠标移动拖尾
Dec 27 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模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
onpropertypchange
2006/07/01 Javascript
javascript while语句和do while语句的区别分析
2007/12/08 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
深入理解NumPy简明教程---数组1
2016/12/17 Python
python实现txt文件格式转换为arff格式
2018/05/31 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
python如何进行矩阵运算
2020/06/05 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
结婚典礼证婚词
2014/01/08 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
2014和解协议书范文
2014/09/15 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
毕业生就业推荐表自我评价
2015/03/02 职场文书
商场营业员岗位职责
2015/04/14 职场文书