jQuery'每个'循环与JSON数组

Question

我正在尝试使用jQuery的each循环来遍历此JSON并将其添加到div命名#contentHere.JSON如下:

{ "justIn": [
  { "textId": "123", "text": "Hello", "textType": "Greeting" },
  { "textId": "514", "text":"What's up?", "textType": "Question" },
  { "textId": "122", "text":"Come over here", "textType": "Order" }
  ],
 "recent": [
  { "textId": "1255", "text": "Hello", "textType": "Greeting" },
  { "textId": "6564", "text":"What's up?", "textType": "Question" },
  { "textId": "0192", "text":"Come over here", "textType": "Order" }
  ],
 "old": [
  { "textId": "5213", "text": "Hello", "textType": "Greeting" },
  { "textId": "9758", "text":"What's up?", "textType": "Question" },
  { "textId": "7655", "text":"Come over here", "textType": "Order" }
 ]
}

我通过使用此代码获取此JSON:

$.get("data.php", function(data){

}) 

有解决方案吗

Answer 1

尝试(未经测试):

$.getJSON("data.php", function(data){
    $.each(data.justIn, function() {
        $.each(this, function(k, v) {
            alert(k + ' ' + v);
        });
    });
    $.each(data.recent, function() {
        $.each(this, function(k, v) {
            alert(k + ' ' + v);
        });
    });
    $.each(data.old, function() {
        $.each(this, function(k, v) {
            alert(k + ' ' + v);
        });
    });    
});

我想,三个独立的循环因为您可能希望以不同的方式处理每个数据集(justIn,recent,old).如果没有,你可以这样做:

$.getJSON("data.php", function(data){
    $.each(data, function(k, v) {
        alert(k + ' ' + v);
        $.each(v, function(k1, v1) {
            alert(k1 + ' ' + v1);
        });
    });
}); 

Answer 2

简短的代码,但功能齐全

以下是混合jQuery解决方案,它将每个数据"记录"格式化为HTML元素,并将数据属性用作HTML属性值.

jquery each运行内循环; 我需要for外部循环上的常规JavaScript 才能获取属性名称(而不是值)以显示为标题.根据品味,它可以根据略有不同的行为进行修改.

这只是5行主要代码,但包含在多行上以供显示:

$.get("data.php", function(data){

    for (var propTitle in data) {

        $('<div></div>') 
            .addClass('heading')
            .insertBefore('#contentHere')
            .text(propTitle);

            $(data[propTitle]).each(function(iRec, oRec) {

                $('<div></div>')
                    .addClass(oRec.textType)
                    .attr('id', 'T'+oRec.textId)
                    .insertBefore('#contentHere')
                    .text(oRec.text);
            });
    }

});

产生输出

(注意:我通过预先添加一个数字来修改JSON数据文本值,以确保我以正确的顺序显示正确的记录 - 而"调试")

<div class="heading">
    justIn
</div>
<div id="T123" class="Greeting">
    1Hello
</div>
<div id="T514" class="Question">
    1What's up?
</div>
<div id="T122" class="Order">
    1Come over here
</div>
<div class="heading">
    recent
</div>
<div id="T1255" class="Greeting">
    2Hello
</div>
<div id="T6564" class="Question">
    2What's up?
</div>
<div id="T0192" class="Order">
    2Come over here
</div>
<div class="heading">
    old
</div>
<div id="T5213" class="Greeting">
    3Hello
</div>
<div id="T9758" class="Question">
    3What's up?
</div>
<div id="T7655" class="Order">
    3Come over here
</div>
<div id="contentHere"></div>

应用样式表

<style>
.heading { font-size: 24px; text-decoration:underline }
.Greeting { color: green; }
.Question { color: blue; }
.Order { color: red; }
</style>

获得"漂亮"的数据集

alt text http://img14.imageshack.us/img14/1148/62593416.png

更多信息
JSON数据以下列方式使用:

对于每个类别(数组所在的键名):

• 键名用作节标题(例如justIn)

对于数组中保存的每个对象:

• 'text'成为div的内容
• 'textType'成为div的类(挂钩到样式表)
• 'textId'成为div的id
• 例如<div id ="T122"class ="Order">来这里</ div>

Answer 3

这对我有用：

$.get("data.php", function(data){
    var expected = ['justIn', 'recent', 'old'];
    var outString = '';
    $.each(expected, function(i, val){
        var contentArray = data[val];
        outString += '<ul><li><b>' + val + '</b>: ';
        $.each(contentArray, function(i1, val2){
            var textID = val2.textId;
            var text = val2.text;
            var textType = val2.textType;
            outString += '<br />('+textID+') '+'<i>'+text+'</i> '+textType;
        });
        outString += '</li></ul>';
    });
    $('#contentHere').append(outString);
}, 'json');

这会产生以下输出：

<div id="contentHere"><ul>
<li><b>justIn</b>:
<br />
(123) <i>Hello</i> Greeting<br>
(514) <i>What's up?</i> Question<br>
(122) <i>Come over here</i> Order</li>
</ul><ul>
<li><b>recent</b>:
<br />
(1255) <i>Hello</i> Greeting<br>
(6564) <i>What's up?</i> Question<br>
(0192) <i>Come over here</i> Order</li>
</ul><ul>
<li><b>old</b>:
<br />
(5213) <i>Hello</i> Greeting<br>
(9758) <i>What's up?</i> Question<br>
(7655) <i>Come over here</i> Order</li>
</ul></div>

看起来像这样：

• justIn :
  (123)你好问候
  (514)怎么了？问题
  (122)过来点菜

• 最近:
  (1255) Hello Greeting
  (6564)怎么了？问题
  (0192)过来点单

• old :
  (5213) Hello Greeting
  (9758)怎么了？问题
  (7655)过来这里订购

另外，记得设置contentType为'json'