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>