js操作json
一、什么是json?
json英文全称 JavaScript Object Notation，是一种易于理解的轻量级数据交换格式。
JSON 作用：用于存储和传输数据的格式。 通常用于服务端向网页传递数据 。
二、语法规则
- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
json对象的代码示例：
{"firstName":"John", "lastName":"Doe"}
json数组的代码示例：
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
三、json的操作
JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
相关代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
名: <span id="fname"></span><br>
姓: <span id="lname"></span><br>
</p>
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
var obj = eval ("(" + txt + ")");
document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>
JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
语法：JSON.parse(text[, reviver])
参数：
-
- text:必需， 一个有效的 JSON 字符串，
- reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
相关示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>从 JSON 字符串中创建一个对象</h2>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"name":"菜鸟教程","site":"http://www.runoob.com" },' +
'{"name":"Google","site":"http://www.Google.com" },' +
'{"name":"Taobao","site":"http://www.taobao.com" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].name + " " + obj.employees[1].site;
</script>
</body>
</html>
选参：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2>使用可选参数，回调函数</h2>
<p id="demo"></p>
<script>
JSON.parse('{"p": 5}', function(k, v) {
if (k === '') { return v; }
return v * 2;
});
JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', function(k, v) {
document.write( k );// 输出当前属性，最后一个为 ""
document.write("<br>");
return v; // 返回修改的值
});
</script>
</body>
</html>
JSON.stringify方法用于将一个值转为字符串。该字符串应该符合JSON格式，并且可以被JSON.parse方法还原。
语法：JSON.stringify(value[, replacer[, space]])
参数说明：
-
- value:
必需， 一个有效的 JSON 字符串。
- replacer:
可选。用于需要转成字符串的属性。。
如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
- space:
可选，文本添加缩进、空格和换行符，用于增加返回的JSON字符串的可读性。如果是数字，表示每个属性前面添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每行前面。
- value:
相关代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo"></p>
<script>
var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"}
str_pretty1 = JSON.stringify(str)
document.write( "只有一个参数情况：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty1 + "</pre>" );
document.write( "<br>" );
str_pretty2 = JSON.stringify(str, null, 4) //使用四个空格缩进
document.write( "使用参数情况：" );
document.write( "<br>" );
document.write("<pre>" + str_pretty2 + "</pre>" ); // pre 用于格式化输出
</script>
</body>
</html>
由 JSON.stringify 方法用于允许转换某个对象的数据以进行 JavaScript Object Notation (JSON) 序列化。
语法：objectname.toJSON()
参数：objectname必需。 需要进行 JSON 序列化的对象。
代码示例：
使用 toJSON 方法将大写的字符串成员值序列化。 在调用 JSON.stringify 时调用 toJSON 方法。
var contact = new Object();
contact.firstname = "Jesper";
contact.surname = "Aaberg";
contact.phone = ["555-0100", "555-0120"];
contact.toJSON = function(key var replacement = new Object();
for (var val in this)
{
if (typeof (this[val]) === 'string')
replacement[val] = this[val].toUpperCase();
else
replacement[val] = this[val]
}
return replacement;
};
var jsonText = JSON.stringify(contact);
/* The value of jsonText is:
'{"firstname":"JESPER","surname":"AABERG","phone":["555-0100","555-0120"]}'
*/
以下示例演示如何使用作为 Date 对象的内置成员的 toJSON 方法。
var dt = new Date('8/24/2009');
dt.setUTCHours(7, 30, 0);
var jsonText = JSON.stringify(dt);
/* The value of jsonText is:
'"2009-08-24T07:30:00Z"'
*/
