JSON JSON使用，举例

最新推荐文章于 2024-05-02 00:16:14 发布

ZPD_zpd

最新推荐文章于 2024-05-02 00:16:14 发布

阅读量117

点赞数

文章标签： javascript json

本文链接：https://blog.csdn.net/zpd_zpd/article/details/110919082

版权

JSON

什么是JSON

JSON：JavaScript 对象表示法（JavaScript Object Notation）。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 是轻量级的文本数据交换格式

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
大括号 {} 保存对象
中括号 [] 保存数组，数组可以包含多个对象

//在js模拟获取数据
// ``模板字符串
var json = `{
				"student":[
				{"name":"jack","age":18},
				{"name":"ros","age":16},
				{"name":"luce","age":19}
				]
			}`;

JSON 名称/值对

JSON 数据的书写格式是：

key : value

名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：

"name" : "张三"

这很容易理解，等价于这条 JavaScript 语句：

name = "张三"

JSON 值

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在中括号中）
对象（在大括号中）
null

JSON 数组

JSON 数组在中括号 [] 中书写：

数组可包含多个对象：

[
{ key1 : value1-1 , key2:value1-2 },
{ key1 : value2-1 , key2:value2-2 },
{ key1 : value3-1 , key2:value3-2 },
…
{ keyN : valueN-1 , keyN:valueN-2 },
]

JSON.parse()

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON.parse(text[, reviver])

var json = `{
	"student":[
	{"name":"jack","age":18},
	{"name":"ros","age":16},
	{"name":"luce","age":19}
	]
}`;

console.log(typeof json);   //string
// JSON文本字符串转换为对象
json=JSON.parse(json);
console.log(typeof json);    // object

转换为JavaScript对象后，可访问对象的值。

// 定义变量，访问对象的值
var student=json.student;
for(var i=0;i<student.length;i++){
	console.log(student[i].name);
}
/*
jack
ros
luce
*/
console.log(json.student[0].name);  //jack

JSON.stringify()

使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

// JSON对象转换为字符串
var str =JSON.stringify(json);
console.log(typeof str);  // string

举例：使用js模拟获取的数据，将数据添加到表格中
在这里插入图片描述

<body>
	<table border="" cellspacing="" cellpadding="" id="teacher">
		<thead>
			<td>老师姓名</td>
			<td>年龄</td>
		</thead>
		<tbody id="teatbody">

		</tbody>
	</table>
	<table border="" cellspacing="" cellpadding="" id="student">
		<thead>
			<td>学生姓名</td>
			<td>年龄</td>
		</thead>
		<tbody id="stutbody">

		</tbody>
	</table>
	<script type="text/javascript">
		var teatbody = document.getElementById("teatbody");
		var stutbody = document.getElementById("stutbody");
		//模拟数据
		var json =
			`{
			"teacher":[{"name":"张三" , "age":30},{"name":"李四" , "age":26},{"name":"王五" , "age":32}],
			"student":[{"name":"甲" , "age":18},{"name":"乙" , "age": 20},{"name":"丙" , "age": 19}]
		}`;

		// 将json文本转换为对象
		json = JSON.parse(json);
		//获取json对象中对应的值
		var teacher = json.teacher;
		//获取json对象中对应的值
		var student = json.student;
		// 封装一个函数
		function add(tbody, json) {
		    // for循环添加数据
			for (var i = 0; i < json.length; i++) {
				//创建表格行
				var tr = document.createElement("tr");
				// 添加到表格中
				tbody.appendChild(tr);

				// 创建老师姓名单元格
				var tdname = document.createElement("td");
				// 添加单元格内容
				tdname.innerHTML = json[i].name
				// 添加到tr中
				tr.appendChild(tdname);
				//创建老师年龄单元格
				var tdage = document.createElement("td");
				//添加年龄
				tdage.innerHTML = json[i].age;
				//添加到tr中
				tr.appendChild(tdage);
			}
		}
		// 调用函数
		add(teatbody, teacher);
		add(stutbody, student);
	</script>
</body>