十七、JSON

一、简介

JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。

二、JSON语法

2-1 JSON语法规则

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

2-2 JSON对象值得类型

1.null
2.string : "hello json"            （在双引号中）
3.number : 2048                            （整数或浮点数）
4.boolean : true                        （true 或 false）
5.object                                        （在大括号中）
6.array                                            （在中括号中）

2-3 JSON对象

JSON 对象在大括号（{}）中书写：
对象可以包含多个名称/值对：

{ "name":"菜鸟教程" , "url":"www.runoob.com" }

等价于

name = "菜鸟教程"
url = "www.runoob.com"

2-4 JSON 数组

JSON 数组在中括号中书写：
数组可包含多个对象：

{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" }, 
{ "name":"google" , "url":"www.google.com" }, 
{ "name":"微博" , "url":"www.weibo.com" }
]
}

在上面的例子中，对象 “sites” 是包含三个对象的数组。每个对象代表一条关于某个网站（name、url）的记录。

2-5 JSON 使用 JavaScript 语法

通过 JavaScript，您可以创建一个对象数组，并像这样进行赋值

var sites = [
    { "name":"runoob" , "url":"www.runoob.com" }, 
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"微博" , "url":"www.weibo.com" }
];

可以像这样访问 JavaScript 对象数组中的第一项（索引从 0 开始）：

sites[0].name;
//runoob
修改：
sites[0].name="菜鸟教程";

三、JSON对象

3-1 对象语法

{ "name":"runoob", "alexa":10000, "site":null }

• 对象可以包含多个 key/value（键/值）对。
• key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
• key 和 value 中使用冒号(:)分割。
• 每个 key/value 对使用逗号(,)分割。

  3-2 访问对象值

1. 你可以使用点号（.）来访问对象的值：

   var myObj, x;
   myObj = { "name":"runoob", "alexa":10000, "site":null };
   x = myObj.name;

2. 你也可以使用中括号（[]）来访问对象的值：

   var myObj, x;
   myObj = { "name":"runoob", "alexa":10000, "site":null };
   x = myObj["name"];

   3-3 循环对象

   你可以使用 for-in 来循环对象的属性： ```json var myObj = { “name”:”runoob”, “alexa”:10000, “site”:null }; for (x in myObj) { document.getElementById(“demo”).innerHTML += x + “
   “; }

//name //alexa //site

在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：
```json
var myObj = { "name":"runoob", "alexa":10000, "site":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
}
//runoob
//10000
//null

3-4 嵌套JSON对象

JSON 对象中可以包含另外一个 JSON 对象：

myObj = {
    "name":"runoob",
    "alexa":10000,
    "sites": {
        "site1":"www.runoob.com",
        "site2":"m.runoob.com",
        "site3":"c.runoob.com"
    }
}

你可以使用点号(.)或者中括号([])来访问嵌套的 JSON 对象。

x = myObj.sites.site1;
// 或者
x = myObj.sites["site1"];
//www.runoob.com
//www.runoob.com

3-5 删除对象属性

我们可以使用 delete 关键字来删除 JSON 对象的属性：

delete myObj.sites.site1;
delete myObj.sites["site1"]

四、JSON数组

4-1 数组作为 JSON 对象

[ "Google", "Runoob", "Taobao" ]

• JSON 数组在中括号中书写。
• JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
• JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。

  4-2 JSON 对象中的数组

  对象属性的值可以是一个数组：

  {
  "name":"网站",
  "num":3,
  "sites":[ "Google", "Runoob", "Taobao" ]
  }
  

  访问数组： ```json x = myObj.sites[0];

//Google

<a name="MlmRT"></a>
### 4-3 循环数组
```json
{
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}

1. 你可以使用 for-in 来访问数组： ```javascript for (i in myObj.sites) { x += myObj.sites[i] + “
   “; }

//Google //Runoob //Taobao

2. 你也可以使用 for 循环：
```javascript
for (i = 0; i < myObj.sites.length; i++) {
    x += myObj.sites[i] + "<br>";
}

//Google
//Runoob
//Taobao

4-4 嵌套 JSON 对象中的数组

JSON 对象中数组可以包含另外一个数组，或者另外一个 JSON 对象：

myObj = {
    "name":"网站",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
        { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
        { "name":"Taobao", "info":[ "淘宝", "网购" ] }
    ]
}

我们可以使用 for-in 来循环访问每个数组：

for (i in myObj.sites) {
    x += "<h1>" + myObj.sites[i].name + "</h1>";
    for (j in myObj.sites[i].info) {
        x += myObj.sites[i].info[j] + "<br>";
    }
}

//Google
    //Android
    //Google 搜索
    //Google 翻译
//Runoob
    //菜鸟教程
    //菜鸟工具
    //菜鸟微信
//Taobao
    //淘宝
    //网购

五、JSON.parse()

JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

5-1 语法

JSON.parse(text[, reviver])

• text:必需， 一个有效的 JSON 字符串。
• reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。

  5-2 JSON解析实例

  例如我们从服务器接收了以下数据：

  { "name":"runoob", "alexa":10000, "site":"www.runoob.com" }
  

  我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

  var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
  

  解析完成后，我们就可以在网页上使用 JSON 数据了： ```javascript

//runoob：www.runoob.com

<a name="YIotM"></a>
### 5-3 从服务端接收JSON数据
我们可以使用 AJAX 从服务器请求 JSON 数据，并解析为 JavaScript 对象。
```javascript
//服务端数据
{
    "name":"缃戠珯",
    "num":3,
    "sites": [
        { "name":"Google", "info":[ "Android", "Google 鎼滅储", "Google 缈昏瘧" ] },
        { "name":"Runoob", "info":[ "鑿滈笩鏁欑▼", "鑿滈笩宸ュ叿", "鑿滈笩寰俊" ] },
        { "name":"Taobao", "info":[ "娣樺疂", "缃戣喘" ] }
    ]
}

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo.txt", true);
xmlhttp.send();

5-4 从服务端接收数组的 JSON 数据

如果从服务端接收的是数组的 JSON 数据，则 JSON.parse 会将其转换为 JavaScript 数组：

//服务端数据
[ "Google", "Runoob", "Taobao" ]

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myArr = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myArr[1];
    }
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();

5-5 异常

5-5-1 解析数据

JSON 不能存储 Date 对象。

• 如果你需要存储 Date 对象，需要将其转换为字符串。之后再将字符串转换为 Date 对象。 ```javascript var text = ‘{ “name”:”Runoob”, “initDate”:”2013-12-14”, “site”:”www.runoob.com”}’; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate);

document.getElementById(“demo”).innerHTML = obj.name + “创建日期: “ + obj.initDate;

- 我们可以启用 JSON.parse 的第二个参数 reviver，一个转换结果的函数，对象的每个成员调用此函数。
```javascript
var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}';
var obj = JSON.parse(text, function (key, value) {
    if (key == "initDate") {
        return new Date(value);
    } else {
        return value;
}});

document.getElementById("demo").innerHTML = obj.name + "创建日期：" + obj.initDate;

5-5-2 解析函数

JSON 不允许包含函数，但你可以将函数作为字符串存储，之后再将字符串转换为函数。

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");

document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

六、JSON.stringify()

JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

6-1 语法

JSON.stringify(value[, replacer[, space]])

• value:必需， 要转换的 JavaScript 值（通常为对象或数组）。
  
• replacer:可选。用于转换结果的函数或数组。
  如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：””。
  如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
  
• space:可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。
  

  6-2 JavaScript 对象转换

  例如我们向服务器发送以下数据：
  我们使用 JSON.stringify() 方法处理以上数据，将其转换为字符串：

  var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
  var myJSON = JSON.stringify(obj);
  

  myJSON 为字符串。
  我们可以将 myJSON 发送到服务器： ```javascript var obj = { “name”:”runoob”, “alexa”:10000, “site”:”www.runoob.com”}; var myJSON = JSON.stringify(obj); document.getElementById(“demo”).innerHTML = myJSON;

//{“name”:”runoob”,”alexa”:10000,”site”:”www.runoob.com”}

<a name="TAzZA"></a>
### 6-3 JavaScript 数组转换
我们也可以将 JavaScript 数组转换为 JSON 字符串：
```javascript
var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);

myJSON 为字符串。
我们可以将 myJSON 发送到服务器：

var arr = [ "Google", "Runoob", "Taobao", "Facebook" ];
var myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;

//["Google","Runoob","Taobao","Facebook"]

6-4 异常

6-4-1 解析数据

JSON 不能存储 Date 对象。
JSON.stringify() 会将所有日期转换为字符串。

var obj = { "name":"Runoob", "initDate":new Date(), "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

//{"name":"Runoob","initDate":"2020-02-29T10:23:01.924Z","site":"www.runoob.com"}

之后你可以再将字符串转换为 Date 对象。

6-4-2 解析函数

JSON 不允许包含函数，JSON.stringify() 会删除 JavaScript 对象的函数，包括 key 和 value。

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

//{"name":"Runoob","site":"www.runoob.com"}

我们可以在执行 JSON.stringify() 函数前将函数转换为字符串来避免以上问题的发生：

var obj = { "name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);

document.getElementById("demo").innerHTML = myJSON;

//{"name":"Runoob","alexa":"function () {return 10000;}","site":"www.runoob.com"}

七、JSON使用

7-1 把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。
为了更简单地为您讲解，我们使用字符串作为输入进行演示（而不是文件）

7-2 JSON 实例 - 来自字符串的对象

创建包含 JSON 语法的 JavaScript 字符串：

var txt = '{ "sites" : [' +
'{ "name":"菜鸟教程" , "url":"www.runoob.com" },' +
'{ "name":"google" , "url":"www.google.com" },' +
'{ "name":"微博" , "url":"www.weibo.com" } ]}';

• 由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
• eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：

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

  在网页中使用JavaScript对象 ```javascript var txt = ‘{ “sites” : [‘ + ‘{ “name”:”菜鸟教程” , “url”:”www.runoob.com” },’ + ‘{ “name”:”google” , “url”:”www.google.com” },’ + ‘{ “name”:”微博” , “url”:”www.weibo.com” } ]}’;

var obj = eval (“(“ + txt + “)”);

document.getElementById(“name”).innerHTML=obj.sites[0].name document.getElementById(“url”).innerHTML=obj.sites[0].url

//网站名: 菜鸟教程 //网站地址: www.runoob.com ```