json取值（对象和数组）

按对象取值：

jQuery代码如下

 1 (function ($) {
 2             $.getJSON('ajax/test.json', function (data) {
 3                 var items = [];
 4 
 5                 $.each(data.comments, function (key, val) {
 6                     items.push('<li class="' + 'tag' + val.class + '">' + '<a href="#">' + val.content + '</a>' + '</li>');
 7                 });
 8 
 9                 //第一个标签
10                 $('<ul/>', {
11                     'class':'',
12                     html:items.join('')
13                 }).appendTo('.tags');
14 
15                 //第二个标签
16                 $('<ul/>', {
17                     'class':'alt',
18                     html:items.join('')
19                 }).appendTo('.tags');
20             });
21         })(jQuery);

json代码如下

 1 {"comments":[
 2     {
 3         "class":"1",
 4         "content":"Lorem ipsum"
 5     },
 6     {
 7         "class":"2",
 8         "content":"Dolor sit amet"
 9     },
10     {
11         "class":"3",
12         "content":"Consectetur adipiscing elit"
13     },
14     {
15         "class":"2",
16         "content":"Proin"
17     },
18     {
19         "class":"4",
20         "content":"Sagittis libero"
21     },
22     {
23         "class":"1",
24         "content":"Aliquet augue"
25     },
26     {
27         "class":"1",
28         "content":"Quisque dui lacus"
29     },
30     {
31         "class":"5",
32         "content":"Consequat"
33     },
34     {
35         "class":"2",
36         "content":"Dictum non"
37     },
38     {
39         "class":"1",
40         "content":"Venenatis et tortor"
41     },
42     {
43         "class":"3",
44         "content":"Suspendisse mauris"
45     },
46     {
47         "class":"4",
48         "content":"In accumsan"
49     },
50     {
51         "class":"1",
52         "content":"Egestas neque"
53     },
54     {
55         "class":"5",
56         "content":"Mauris eget felis"
57     },
58     {
59         "class":"1",
60         "content":"Suspendisse"
61     },
62     {
63         "class":"2",
64         "content":"condimentum eleifend nulla"
65     }
66 ]}

 

按数组取值：

jQuery代码如下

 1 (function ($) {
 2             $.getJSON('ajax/test_array.json', function (data) {
 3                 var items = [];
 4 
 5                 $.each(data.comments, function (key, val) {
 6                     items.push('<li class="' + 'tag' + val[0] + '">' + '<a href="#">' + val[1] + '</a>' + '</li>');
 7                 });
 8 
 9                 //第一个标签
10                 $('<ul/>', {
11                     'class':'',
12                     html:items.join('')
13                 }).appendTo('.tags');
14 
15                 //第二个标签
16                 $('<ul/>', {
17                     'class':'alt',
18                     html:items.join('')
19                 }).appendTo('.tags');
20             });
21         })(jQuery);

json代码如下

 1 {"comments":[
 2     ["1", "Lorem ipsum"],
 3     ["2", "Dolor sit amet"],
 4     ["3", "Consectetur adipiscing elit"],
 5     ["2", "Proin"],
 6     ["4", "Sagittis libero"],
 7     ["1", "Aliquet augue"],
 8     ["1", "Quisque dui lacus"],
 9     ["5", "Consequat"],
10     ["2", "Dictum non"],
11     ["1", "Venenatis et tortor"],
12     ["3", "Suspendisse mauris"],
13     ["4", "In accumsan"],
14     ["1", "Egestas neque"],
15     ["5", "Mauris eget felis"],
16     ["1", "Suspendisse"],
17     ["2", "condimentum eleifend nulla"]
18 ]}

 

共用的HTML代码如下

1 <div class="tags"></div>

 

明显可以看出按数组取值的数据量会小很多

 

posted @ 2012-04-17 16:21  小猩猩君  阅读(11562)  评论(0)  编辑  收藏  举报