处理复杂的JSON对象

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

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

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

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

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

1. {
2. firstName：‘Peggy‘，
3. lastName：‘Jones‘，
4. phone：’415-555-5235’
5. }

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

1. {
2. contact1：{
3. firstName：‘Frank‘，
4. lastName：‘Smith‘，
5. phone：’503-555-1212’
6. }，
7. contact2：{
8. firstName：‘Peggy‘，
9. lastName：‘Jones‘，
10. phone：’415-555-5235’
11. }
12. }

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

1. var data={
2. contact1：{
3. firstName：‘Frank‘，
4. lastName：‘Smith‘，
5. phone：’503-555-1212’
6. }，
7. contact2：{
8. firstName：‘Peggy‘，
9. lastName：‘Jones‘，
10. phone：’415-555-5235’
11. }
12. }；

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

1. data.contact1

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

1. data.contact1.firstName

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

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

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

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

1. ＜p＞Contact：Frank Smith＜br＞
2. Phone：503-555-1212＜/p＞
3. ＜p＞Contact：Peggy Jones＜br＞
4. Phone：415-555-5235＜/p＞

原文：处理复杂的JSON对象，转载请注明出处：http://www.uphtm.com/js/226.html