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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
javascript天然的迭代器
Oct 29 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
webpack是如何实现模块化加载的方法
Nov 06 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的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
javascript中length属性的探索
2011/07/31 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
Vue DevTools调试工具的使用
2017/12/05 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
环保建议书500字
2014/05/14 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
优秀纪检干部材料
2014/08/27 职场文书
倡议书作文
2015/01/19 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server
mysql数据库如何转移到oracle
2022/12/24 MySQL