欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JSON及JSON遍历再理解

程序员文章站 2022-03-05 23:23:19
...

JSON是一种数据交换格式（轻量级），页面向服务器提交ajax请求，服务器返回json格式的数据，返回的数据一般是自己在后台拼接的Json字符串，前台需要把json字符串转为javascript对象（JSON对象），才可以对JSON数据进行解析。

json字符串 VS json对象 

var personStr = "{"name":"Tom","sex":"male","age":"22"}";(字符串)

var person = {"name":"Tom","sex":"male","age":"22"};（对象）

区别：一个加了引号一个没有加。json对象直接可以通过 person.name 拿到值Tom。

只是举了一个很简单的例子，事实上，json数据会层层嵌套，需要一层层剥开。

JSON标准格式：https://blog.csdn.net/zy512638348/article/details/78270682?utm_source=blogxgwz1

JSON的遍历：（如何遍历取得键的值？如何遍历取得属性的值？）

也以一个简单的例子为例：

var dataString='{"teachers":[{"name":"黄波","course":"网页高级设计"},
                            {"name":"贺敏","course":"Java程序设计"},
                            {"name":"毛丽娟","course":"JavaScript程序设计"}],
                "students":[{"name":"张三","age":20},
                            {"name":"李四","age":21},
                            {"name":"王五","age":19}]
                }'; 
var dataObj = JSON.parse(dataString);//将json字符串转为json对象

 for in:既可以遍历数组，又可以遍历对象的属性。

for(i in dataObj) 单独输出i是输出键的值，输出data[i]才是键所对应的属性的值。理解了这一点应该就不难了。

	for(i in dataObj){
		alert(i);
		alert(dataObj[i]);
		for(j in dataObj[i]){
			alert(j);
			alert(dataObj[i][j]);
			for(k in dataObj[i][j]){
				alert(k);
				alert(dataObj[i][j][k]);
			}
		}
	}

html完整演示代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<body>
	<script type="text/javascript">

		var dataString='{"teachers":[{"name":"黄波","course":"网页高级设计"},
                            {"name":"贺敏","course":"Java程序设计"},
                            {"name":"毛丽娟","course":"JavaScript程序设计"}],
                "students":[{"name":"张三","age":20},
                            {"name":"李四","age":21},
                            {"name":"王五","age":19}]
                }'; 
	var dataObj = JSON.parse(dataString);//将json字符串转为json对象
	for(i in dataObj){
		alert(i);//属性名字（teachers,students）
		alert(dataObj[i]);//属性值，在这里是一个对象数组[object Object],[object Object],[object Object]
		for(j in dataObj[i]){
			alert(j);//数字0，1，2
			alert(dataObj[i][j]);//一个对象[object Object]（嵌套的json对象）
			for(k in dataObj[i][j]){
				alert(k);//属性名字(name course age)
				alert(dataObj[i][j][k]);//属性值
			}
		}
	}
	

</script>
</body>
</html>

将上述js代码整合到html页面会从弹出框清楚看到解析的过程

      

 

相关标签： JSON

上一篇： JavaScript中的迭代器和生成器详解_javascript技巧

下一篇： web开发是用px还是rem

推荐阅读