编程 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 相关文章推荐

用JavaScript实现仿Windows关机效果

Mar 10 Javascript

随机显示经典句子或诗歌的javascript脚本

Aug 04 Javascript

返回对象在当前级别中是第几个元素的实现代码

Jan 20 Javascript

jQuery获取样式中的背景颜色属性值/颜色值

Dec 17 Javascript

JavaScript中的getTimezoneOffset()方法使用详解

Jun 10 Javascript

JavaScript Array对象详解

Mar 01 Javascript

JS控制HTML元素的显示和隐藏的两种方法

Sep 27 Javascript

浅析vue数据绑定

Jan 17 Javascript

Angular2使用Guard和Resolve进行验证和权限控制

Apr 24 Javascript

vue2.0 循环遍历加载不同图片的方法

Mar 06 Javascript

vue 实现购物车总价计算

Nov 06 Javascript

基于vue-cli3+typescript的tsx开发模板搭建过程分享

Feb 28 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