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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
Angular5.1新功能分享
Dec 21 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
微信小程序 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 自动加载的简单实现(推荐)
2016/08/12 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
js判断变量是否未定义的代码
2020/03/28 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
js分页工具实例
2015/01/28 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
常用的javascript设计模式
2017/01/11 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python实现批量图片格式转换
2020/06/16 Python
python实现烟花小程序
2019/01/30 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
石油大学毕业生自荐信
2014/01/28 职场文书
新品发布会主持词
2014/04/02 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python