处理复杂的JSON对象

浏览数：19 / 时间：2015年06月09日

转载请注明出处：http://www.uphtm.com/js/226.html

我们可以使用对象直接量作为一个JSON对象中的值，换句话说，对象直接量嵌套在对象直接量中，从而创建甚至更为复杂的信息集合。

这里有一个例子。假设我们希望服务器使用JSON送回多个人的联络信息。我们将向名为contacts.php的文件发送一个请求，带上一个查询字符串，指明希望返回多少个联络人的信息。代码可能如下所示：

$.getJSON（‘contacts.php‘，‘limit=2’，processContacts）；

limit=2是发送给服务器的信息，它表示应该返回多少个联络人的信息。Web服务器随后将返回两个联络人的信息。假设第一个人的联系信息和上面的例子相同（Frank Smith），第二个人的联络信息是如下所示的另一个JSON对象：

{
firstName：‘Peggy‘，
lastName：‘Jones‘，
phone：’415-555-5235’
}

Web服务器可能返回表示一个单个JSON对象的字符串，它组合了这两个对象，如下所示：

{
contact1：{
firstName：‘Frank‘，
lastName：‘Smith‘，
phone：’503-555-1212’
}，
contact2：{
firstName：‘Peggy‘，
lastName：‘Jones‘，
phone：’415-555-5235’
}
}

假设回调函数接收了一个名为data的单个参数（例如，函数processContacts-（data））。变量data将会随后分配给该JSON对象，就好像执行了如下的代码：

var data={
contact1：{
firstName：‘Frank‘，
lastName：‘Smith‘，
phone：’503-555-1212’
}，
contact2：{
firstName：‘Peggy‘，
lastName：‘Jones‘，
phone：’415-555-5235’
}
}；

现在，我们可以在回调函数中访问第一个联络人对象的信息，如下所示：

data.contact1

并且像下面这样访问第一个联络人的名字：

data.contact1.firstName

但是，在这个例子中，由于我们想要处理多个联络人，因此jQuery提供了一个函数允许遍历JSON对象中的每个项目，这就是each（）函数。其基本的结构是：

$.each（JSON, function（name, value）{
}）；

我们给each（）函数传递了JSON对象以及一个匿名函数。这个匿名函数接收JSON对象中的每个项目的名字和值。下面是在当前的例子中使用JSON对象的样子：

1$.getJSON（‘contacts.php‘，‘limit=2’，processContacts）；
2 function processContacts（data）{
3//create variable with empty string
4 var infoHTML=’’；
5
6//loop through each object in the JSON data
7$.each（data, function（contact, contactInfo）{
8 infoHTML+=’＜p＞Contact：’+contactInfo.frstName；
9 infoHTML+=’’+contactInfo.lastName+’＜br＞’；
10 infoHTML+=‘Phone：’+contactInfo.phone+’＜/p＞’；
11}）；//end of each（）
12
13//add finished HTML to page
14$（‘#info‘）.html（infoHTML）；
15}

代码分解分析如下：

1.第1行创建了Ajax请求，并且指定了回调函数。

2.第2行创建了回调函数，它接收服务器送回的JSON对象并将其存储到变量data中。

3.第4行创建了一个空字符串。最终添加到页面的HTML将填充该字符串。

4.第7行是each（）函数，它将会遍历JSON数据中的对象。

each（）函数接收JSON对象作为其第一个参数（data），接收一个匿名函数作为其第二个参数。基本上，对于主对象中的每个对象（在这个例子中是contact1和contact2），该匿名函数都接收作为字符串的该对象的名字（即第7行中列出的contact参数）以及该对象的值（即contactInfo参数）。在这个例子中，contactInfo变量将保存包含了联络信息的对象直接量。

5.第8～10行从一个联络人中提取信息。

each（）函数是一个循环，因此，第8～10行对于每个联络人运行两次。

6.第14行通过把HTML添加到页面来更新Web页面。

最终的结果是如下的HTML：