处理复杂的JSON对象
转载请注明出处：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：
- ＜p＞Contact：Frank Smith＜br＞
- Phone：503-555-1212＜/p＞
- ＜p＞Contact：Peggy Jones＜br＞
- Phone：415-555-5235＜/p＞
