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获取URL参数与参数值的示例代码
Dec 20 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 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实现的MongoDB数据库操作类分享
2014/05/12 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
python输出指定月份日历的方法
2015/04/23 Python
Python模块搜索路径代码详解
2018/01/29 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
如何解决安装python3.6.1失败
2020/07/01 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
公司营业员的自我评价
2014/03/04 职场文书
工作决心书范文
2014/03/11 职场文书
日化店促销方案
2014/03/26 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android