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 相关文章推荐
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 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
操作Oracle的php类
2006/10/09 PHP
php中Ctype函数用法详解
2014/12/09 PHP
Laravel实现表单提交
2017/05/07 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
公司JAVA开发面试题
2015/04/02 面试题
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
2019年c语言经典面试题目
2016/08/17 面试题
装饰活动策划方案
2014/02/11 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
师德建设实施方案
2014/03/21 职场文书
名人演讲稿范文
2014/09/16 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
房产授权委托书范本
2014/09/22 职场文书