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 相关文章推荐
jquery 使用点滴函数代码
May 20 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
Vue动态获取width的方法
Aug 22 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
微信小程序webview 脚手架使用详解
Jul 22 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中常用字符串处理代码片段整理
2011/11/07 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
python解析yaml文件过程详解
2019/08/30 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
学习python需要有编程基础吗
2020/06/02 Python
Python中的With语句的使用及原理
2020/07/29 Python
python Scrapy框架原理解析
2021/01/04 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
挂职锻炼工作总结2015
2015/05/28 职场文书
培训计划通知
2015/07/15 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL