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 相关文章推荐
js动态创建标签示例代码
Jun 09 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
微信小程序如何获取手机验证码
Nov 04 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/10/09 PHP
php header()函数使用说明
2008/07/10 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python实现实时视频流播放代码实例
2020/01/11 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Python实现一个论文下载器的过程
2021/01/18 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
租房协议书
2014/09/12 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
小学教师教学反思
2016/02/24 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书