JSON学习（附：遍历JSON数据的方法）

最新推荐文章于 2025-05-17 14:20:52 发布

JMission

最新推荐文章于 2025-05-17 14:20:52 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： js json 遍历

本文链接：https://blog.youkuaiyun.com/JMission/article/details/42103499

JS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了JSON的基本概念、语法特点及其数据遍历方法。详细讲述了如何直接通过名称访问值和利用for循环进行未知名称的遍历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JSON 定义及特点

JSON是JavaScript 对象表示法（JavaScript Object Notation），独立于语言之外的轻量级的“文本数据交换"格式，是纯文本。

JSON 语法规则

数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

遍历JSON数据的方法

1、直接通过名称访问值。

json对象：

var txt = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"George" , "lastName":"Bush" },' +
'{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

var obj = eval ("(" + txt + ")");

<pre name="code" class="html"><p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>

<script type="text/javascript">
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

2、如果不知道名称，可以通过for循环遍历。

json对象：

var data = {"status": 2,

"kpi_results":

<span style="white-space:pre">	</span>{"PV": {"A": [1.1, 2.2, 1.3, 1.5, 2.0, 1.9], "B": [1.5, 2.5, 1.7, 1.9, 2.2, 2.2]},

<span style="white-space:pre">	</span> "CTR": {"A": [1.1, 2.2, 1.3, 1.5, 2.0, 1.9], "B": [1.5, 2.5, 1.7, 1.9, 2.2, 2.2]}},

"description": "这是一个测试",

"locale": "zh-cn",

"groups": "{\"1\": \"A\", \"2\": \"B\"}",

"kpi": null,

"id": 94,

"name": "测试一"}

遍历代码：

for(var details in data){
			if(details=="kpi_results"){
				alert("here");
				for(var kpis in data[details]){
					alert(kpis);
					for(var tests in data[details][kpis]){
						alert(tests);
						alert(data[details][kpis][tests]);
					}
				}
			}
			}

解释：

<pre name="code" class="html" style="font-weight: bold;">以for(var details in data){}为例，每个details遍历data里面第一级的每个键值对的名称，通过<span style="font-family: Arial, Helvetica, sans-serif;">data[details]访问每个details对应的值。</span>