JavaScript对象表示法（JSON）是用于将结构化数据表示为JavaScript对象的标准格式，通常用于在网站上表示和传输数据（例如从服务器向客户端发送一些数据，因此可以将其显示在网页上）。您会经常遇到它，所以在本文中，我们向您提供使用JavaScript处理JSON的所有工作，包括访问JSON对象中的数据项并编写自己的JSON。

什么是JSON?

JSON 是按一种JavaScript对象语法的数据格式。虽然它是基于JavaScript语法，但他独立于JavaScript，这也是为什么许多程序环境能够读取（解读）和生成 JSON。

JSON可以作为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于通过网络传输 JSON 数据。这不是一个大事件——JavaScript 提供一个全局的可访问的 JSON 对象来对这两种数据进行转换。

一个 JSON 对象可以被储存在它自己的文件中，这基本上就是一个文本文件，扩展名为 .json，还有 MIME type 用于 application/json.

JSON结构

我们已经可以推测出 JSON 对象就是基于 JavaScript 对象，而且这几乎是正确的。您可以把 JavaScript 对象原原本本的写入 JSON 数据——字符串，数字，数组，布尔还有其它的字面值对象。这允许您构造出一个对象树，如下：

{"squadName" : "Super hero squad","homeTown" : "Metro City","formed" : 2016,"secretBase" : "Super tower","active" : true,"members" : [{"name" : "Molecule Man","age" : 29,"secretIdentity" : "Dan Jukes","powers" : ["Radiation resistance","Turning tiny","Radiation blast"]},{"name" : "Madame Uppercut","age" : 39,"secretIdentity" : "Jane Wilson","powers" : ["Million tonne punch","Damage resistance","Superhuman reflexes"]},{"name" : "Eternal Flame","age" : 1000000,"secretIdentity" : "Unknown","powers" : ["Immortality","Heat Immunity","Inferno","Teleportation","Interdimensional travel"]}]
}

如果我们要加载对象进入 JavaScript 程序，以保存为一个名为 superHeroes 对象为例，我们使用 . 或 [] 访问对象内的数据，如：

superHeroes.hometown
superHeroes["active"]

为了访问对象中的对象，您只需简单地链式访问（通过属性名和数组索引）。例如，访问 superHeroes 对象中的 members 数组对象的第二个元素的 powers 数组对象的第三个元素，您可以这样做：

superHeroes["members"][1]["powers"][2]

首先我们有变量名 superHeroes，储存对象。
在对象中我们想访问 members 属性，所以我们使用 ["members"]。
members 包含有对象数组，我们想要访问第二个元素，所以我们使用 [1]。
在对象内，我们想访问 powers 属性，所以我们使用 ["powers"]。
powers 属性是一个包含英雄技能的数组。我们想要第三个，所以我们使用 [2]。

JSON 数组

前面我们已经说过，”我们已经可以推测出 JSON 对象就是基于 JavaScript 对象，而且这几乎是正确的“——我们说几乎正确的原因是数组对象也是一种合法的 JSON 对象，例如：

[{"name" : "Molecule Man","age" : 29,"secretIdentity" : "Dan Jukes","powers" : ["Radiation resistance","Turning tiny","Radiation blast"]},{"name" : "Madame Uppercut","age" : 39,"secretIdentity" : "Jane Wilson","powers" : ["Million tonne punch","Damage resistance","Superhuman reflexes"]}
]

上面是完全合法的 JSON。您只需要通过数组索引就可以访问数组元素，如 [0]["powers"][0] 。

其他注意事项

JSON 是一种纯数据格式，它只包含属性，没有方法。
JSON要求在字符串和属性名称周围使用双引号。单引号无效。
甚至一个错位的逗号或分号就可以导致 JSON 文件出错。您应该小心的检查您想使用的数据(虽然计算机生成的 JSON 很少出错，只要生成程序正常工作)。您可以通过像 JSONLint 的应用程序来检验 JSON。
JSON 可以将任何标准合法的 JSON 数据格式化保存，不只是数组和对象。比如，一个单一的字符串或者数字可以是合法的 JSON 对象。虽然不是特别有用处……
与 JavaScript 代码中对象属性可以不加引号不同，JSON 中只有带引号的字符串可以用作属性。

一个JSON示例

首先，拷贝 heroes.html 和 style.css 文件。后者包含了用于页面的简单的 CSS ，前者包含了简单的 HTML body。

<header>
</header><section>
</section>

添加 <script> 元素来包含我们的 JavaScript 代码。当前它只有两行，获得了 <header> 和 <section> 的引用，保存在变量中。

var header = document.querySelector('header');
var section = document.querySelector('section');

从下面的链接下载 JSON 数据。
https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json

加载 JSON 文件：
为了载入 JSON 到页面中，我们将使用一个名为 XMLHTTPRequest 的API（常称为XHR）。这是一个非常有用的 JavaScript 对象，使我们能够通过代码来向服务器请求资源文件(如：图片，文本，JSON，甚至HTML片段)，意味着我们可以更新小段内容而不用重新加载整个页面。这将有更多响应页面，听起来让人兴奋，但是这部分超出我们本部分的文章，所以就不多详述了。

首先，我们将保存一个即将访问的 URL 作为变量。在您的 JavaScript 代码的底部添加下面的代码:

var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';

为了创建一个HTTP请求，我们需要创建一个HTTP请求对象，通过 new 构造函数的形式。在您最下面的代码中写入：

var request = new XMLHttpRequest();

现在我们需要使用 open() 函数打开一个新的请求，添加如下代码：

request.open('GET', requestURL);

这个函数至少含有两个参数，其它的是可选参数。对于示例我们只需要两个强制参数

HTTP 方法，网络连接时使用。这个示例中 GET 就可以了，因为我们只要获得简单的数据。
URL，用于指向请求的地址。我们使用之前保存的变量。

接下来，添加，两行代码，我们设定 responseType 为 JSON，所以服务器将知道我们想要返回一个 JSON 对象，然后发送请求 :

request.responseType = 'json';
request.send();

最后一点内容涉及相应来自服务器的返回数据，然后处理它，添加如下代码在您先前的代码下方：

request.onload = function() {var superHeroes = request.response;populateHeader(superHeroes);showHeroes(superHeroes);
}

这儿我们保存了相应我们请求的数据(访问 response 属性) 于变量 superHeroes ;这个变量现在含有 JSON！我们现在把 superHeroes 传给两个函数，第一个函数将会用正确的数据填充 <header> ，同时第二个函数将创建一个信息卡片，然后把它插入 <section> 中。

我们把代码包在事件处理函数中，当请求对象 load 事件触发时执行代码(见 onload )，这是因为请求对象 load 事件只有在请求成功时触发；这种方式可以保证事件触发时 request.response 是绝对可以访问的。

现在我们已经获得我们的JSON数据，让我们利用它来写两个我们使用的函数。首先，添加下面的代码于之前的代码下方：

function populateHeader(jsonObj) {var myH1 = document.createElement('h1');myH1.textContent = jsonObj['squadName'];header.appendChild(myH1);var myPara = document.createElement('p');myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];header.appendChild(myPara);
}

我们称参数为 jsonObj ，那也是为什么我们要在其中调用 JSON 对象。这儿我们首先使用 createElement() 创建了一个 <h1> 节点，将它的 textContent 设为 JSON 对象的 squadName 属性，然后通过 appendChild() 把它加入 <header> 中。然后我们对段落做了相同的一件事情：创建，设置内容，追加到 <header>。唯一的不同在于它的内容设为一个与 JSON 内属性 homeTown 和 formed 相关联的字符串。

接下来，添加如下的函数到脚本代码底部，这个函数创建和展示了 superhero cards：

function showHeroes(jsonObj) {var heroes = jsonObj['members'];for(i = 0; i < heroes.length; i++) {var myArticle = document.createElement('article');var myH2 = document.createElement('h2');var myPara1 = document.createElement('p');var myPara2 = document.createElement('p');var myPara3 = document.createElement('p');var myList = document.createElement('ul');myH2.textContent = heroes[i].name;myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;myPara2.textContent = 'Age: ' + heroes[i].age;myPara3.textContent = 'Superpowers:';var superPowers = heroes[i].powers;for(j = 0; j < superPowers.length; j++) {var listItem = document.createElement('li');listItem.textContent = superPowers[j];myList.appendChild(listItem);}myArticle.appendChild(myH2);myArticle.appendChild(myPara1);myArticle.appendChild(myPara2);myArticle.appendChild(myPara3);myArticle.appendChild(myList);section.appendChild(myArticle);}
}

首先，我们保存了 JSON 的 members 属性作为一个变量。这个数组含有多个带有英雄信息的对象。

接下来，我们使用一个循环来，遍历每个元素。对于每一个元素，我们：

创建几个元素：一个 <article>,一个 <h2>, 三个 <p>s, 和一个 <ul>。
设置 <h2> 为当前英雄的 name。
使用他们的 secretIdentity, age, “Superpowers:” 介绍信息列表填充三个段落来。
保存 powers 属性于另一个变量 superPowers，包含英雄的 superpowers 列表。
使用另一个循环来遍历当前的英雄的 superpowers ，对于每一个元素我们创建 <li> 元素，把 superpower 放进去，然后使用 appendChild() 把 listItem 放入 <ul> 元素中。
最后一件事情是追加 <h2> , <p> ,还有 <ul> 进入 <article> (myArticle)。然后将 <article> 追加到 <section>。追加的顺序很重要，因为他们将被展示在 HTML 中。

对象和文本间的转换

上述示例就访问 JSON 而言是简单的，因为我们设置了 XHR 来访问 JSON 格式数据：

request.responseType = 'json';

但是有时候我们没有那么幸运，我们接收到一些字符串作为 JSON 数据，然后我们想要将它转换为对象。当我们想要发送 JSON 数据作为信息，我们将需要转换它为字符串，我们经常需要正确的转换数据，幸运的是，这两个问题在web环境中是那么普遍以至于浏览器拥有一个内建的 JSON，包含以下两个方法。

parse(): 以文本字符串形式接受JSON对象作为参数，并返回相应的对象。
stringify(): 接收一个对象作为参数，返回一个对应的JSON字符串。

关键片段如下：

request.open('GET', requestURL);
request.responseType = 'text'; // now we're getting a string!
request.send();request.onload = function() {var superHeroesText = request.response; // get the string from the responsevar superHeroes = JSON.parse(superHeroesText); // convert it to an objectpopulateHeader(superHeroes);showHeroes(superHeroes);
}

正如您所想, stringify() 做相反的事情. 尝试将下面的代码输入您的浏览器 JS 控制台来看看会发生什么：

var myJSON = { "name" : "Chris", "age" : "38" };
myJSON
var myString = JSON.stringify(myJSON);
myString

这儿我们创建了一个JavaScript 对象，然后检查了它包含了什么，然后用 stringify() 将它转换成JSON字符串，最后保存返回值作为变量。然后再一次检查。

JavaScript(十)——JSON相关推荐

html5展示json数据库,显示数据在html5从数据库使用javascript和json
我想从MySQL数据库显示在html中的列表.要从MySQL获取数据我使用json和javascript.但它什么也没有显示!显示数据在html5从数据库使用javascript和json 我的HTM ...
JavaScript对Json的增删改属性
<script type="text/javascript">var json = {"age":24,"name":" ...
JavaScript解析Json字符串
JavaScript可以解析服务器接口返回的json字符串(一般用于Ajax),而不需要json的额外支持. 在JavaScript中可以通过eval()方法将一个json字符串解析成一个JavaSc ...
php用json交换二维数组,PHP和Javascript的JSON交互（处理一个二维数组）
我不得不承认:我是一个彻彻底底的JS白痴.但根据项目需要,不得不使用JSON,不管怎么说,经过一个晚上的学习,已经略有所成,记录下来. PHP的JSON类库我使用的是Services_JSON,没什么 ...
JSON数据格式----- JavaScript与JSON、JavaScript的JSON对象、构建JSON格式数据
JavaScript与JSON JSON是一种语法,用来序列化对象.数组等的.它只是基于JavaScript语法 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWMc ...
php使用 js格式解析,JavaScript解析JSON格式数据的方法示例
本文实例讲述了JavaScript解析JSON格式数据的方法.分享给大家供大家参考,具体如下: 1.使用JavaScript提供的eval()函数function JsonText1() { var ...
对JavaScript解析JSON格式数据的理解
对JavaScript解析JSON格式数据的理解一.JSON与JavaScript对象的关系 1,JSON的由来: 在21世纪初,Douglas Crockford(Web开发领域最知名的技术权威之 ...
JavaScript对JSON数组操作。数组添加（push）以及移除（splitce）
这里写一个小栗子提供给大家学习和纪录. js声明数组以及向数组中添加as移除json数据 JavaScript声明JSON数组的方法: //部分条件,在数据渲上数据要求是数组格式而非json数组格 ...
JavaScript解析json格式数据简单示例
JavaScript解析json格式数据简单示例本文通过for循环来获取json结点数据,需要的朋友可以参考以下这串json数据用来存储预加载的图片路径: 代码如下: var imgData = [ ...

JavaScript(十)——JSON