Working with JSON data

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

前提:	计算机基础知识，HTML 和 CSS 基础 (see First steps and Building blocks) 和 JS 面向对象基础(see Introduction to objects)。
目标:	理解 JSON 的数据储存工作原理，创建你的 JSON 对象。

不，说真的，什么是 JSON?

JSON 是一种按照JavaScript对象语法的数据格式，这是 Douglas Crockford 推广的。虽然它是基于 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.hometownsuperHeroes['active']

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

superHeroes['members'][1]['powers'][2]

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

注：我们已经在 JSONText.html 实例中让JSON 对象进入变量中使其可访问(see the source code)。尝试加载它并且在您的浏览器上访问对象数据。

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 示例

好了，让我们通过运行这个示例来展示我们如何利用JSON数据。

开始吧

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

<header>header><section>section>

添加