JavaScript原生JSON解析与遍历示例

作者:纸飞机时间:2026-10-23 09:39:24浏览:525

本文介绍如何利用JavaScript原生支持的JSON.parse方法将JSON字符串转换为对象,并通过for-in循环遍历获取键值对。示例包含完整的HTML结构与JS逻辑,适合初学者参考。

JavaScript解析JSON数据示例

本文通过具体实例展示JavaScript如何解析JSON数据,供读者参考学习。

JSON作为一种通用的数据格式,其解析过程相对简单。得益于JavaScript语言原生支持JSON,因此JS在处理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.jb51.net/code/HtmlJsRun)来测试上述代码的执行效果。

此外,以下推荐几款实用的JSON在线处理工具,供各位参考使用:

在线JSON代码检验、格式化及美化工具: http://tools.jb51.net/code/json

JSON在线格式化工具: http://tools.jb51.net/code/jsonformat

在线XML与JSON互相转换工具: http://tools.jb51.net/code/xmljson

json代码在线格式化、美化、压缩、编辑及转换工具: http://tools.jb51.net/code/jsoncodeformat

在线json压缩与转义工具: http://tools.jb51.net/code/json_yasuo_trans

如需了解更多JavaScript相关内容,可查阅本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述内容能对大家的JavaScript程序设计工作有所帮助。

作者最新文章