处理复杂的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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。