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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
Vue项目打包压缩的实现(让页面更快响应)
Mar 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
第一节--面向对象编程
2006/11/16 PHP
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
Python3 中文文件读写方法
2018/01/23 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
200行python代码实现2048游戏
2019/07/17 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
致100米运动员广播稿
2014/02/14 职场文书
餐饮营销方案
2014/02/23 职场文书
活动经费申请报告
2015/05/15 职场文书
二审代理词范文
2015/05/25 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书