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的最佳方法分享
Oct 21 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
jquery更改元素属性attr()方法操作示例
May 22 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
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
php获取excel文件数据
2017/04/21 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
jquery 问答知识整理
2010/02/11 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
详解python中的线程与线程池
2019/05/10 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
质检员岗位职责
2013/12/17 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
安全标准化汇报材料
2014/02/03 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
2014年化验室工作总结
2014/11/21 职场文书
初中军训感言
2015/08/01 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers