编程 Javascript

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解析JSON数据示例

- Author -

爱在彩虹

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jQuery的表格操作插件

Apr 22 Javascript

js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)

Mar 25 Javascript

基于Jquery插件开发之图片放大镜效果(仿淘宝)

Nov 19 Javascript

Three.js学习之网格

Aug 10 Javascript

js控制一个按钮是否可点击(可使用)disabled的实例

Feb 14 Javascript

详解Vue2 无限级分类(添加,删除,修改)

Mar 07 Javascript

JavaScript实现的冒泡排序法及统计相邻数交换次数示例

Apr 26 Javascript

Angular表格神器ui-grid应用详解

Sep 29 Javascript

JS中的BOM应用

Feb 02 Javascript

微信小程序tabBar设置实例解析

Nov 14 Javascript

如何搭建一个完整的Vue3.0+ts的项目步骤

Oct 18 Javascript

小程序实现密码输入框

Nov 16 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