jQuery“每个”循环使用JSON数组。

I'm trying to use jQuery's each loop to go through this JSON and add it to a div named #contentHere. The JSON is as follows:

我尝试使用jQuery的每个循环遍历这个JSON并将它添加到一个名为#contentHere的div中。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" }
 ]
}

I'm getting this JSON through use of this code:

我通过使用这段代码获得这个JSON:

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

}) 

Any solutions?

有解决方案吗?

4 个解决方案

#1

Try (untested):

试(未测试):

$.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);
        });
    });    
});

I figured, three separate loops since you'll probably want to treat each dataset differently (justIn, recent, old). If not, you can do:

我认为，三个单独的循环，因为您可能想要区别对待每个数据集(犹斯丁，最近，老)。如果没有，你可以:

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

#2

Brief code but full-featured

The following is a hybrid jQuery solution that formats each data "record" into an HTML element and uses the data's properties as HTML attribute values.

下面是一个混合的jQuery解决方案，它将每个数据“记录”格式化为一个HTML元素，并使用数据的属性作为HTML属性值。

The jquery each runs the inner loop; I needed the regular JavaScript for on the outer loop to be able to grab the property name (instead of value) for display as the heading. According to taste it can be modified for slightly different behaviour.

jquery每个运行内部循环;我需要在外部循环中使用常规的JavaScript，以获取显示为标题的属性名(而不是值)。根据口味，它可以被修改为稍微不同的行为。

This is only 5 main lines of code but wrapped onto multiple lines for display:

这仅仅是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);
            });
    }

});

Produces the output

生成的输出

(Note: I modified the JSON data text values by prepending a number to ensure I was displaying the proper records in the proper sequence - while "debugging")

(注意:我修改了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>

Apply a style sheet

应用一个样式表

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

to get a "beautiful" looking set of data

获得一组“漂亮”的数据

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

alt文本http://img14.imageshack.us/img14/1148/62593416.png

More Info
The JSON data was used in the following way:

JSON数据的使用方式如下:

for each category (key name the array is held under):

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

• the key name is used as the section heading (e.g. justIn)
• 键名用作章节标题(例如:justIn)

for each object held inside an array:

对于数组中的每个对象:

• 'text' becomes the content of a div
• “text”成为div的内容
• 'textType' becomes the class of the div (hooked into a style sheet)
• 'textType'成为div的类(连接到样式表中)
• 'textId' becomes the id of the div
• 'textId'成为div的id
• e.g. <div id="T122" class="Order">Come over here</div>
• 过来这里

#3

This works for me:

这工作对我来说:

$.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');

This produces this output:

这产生输出:

<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>

And looks like this:

和看起来像这样:

• justIn:
  (123) Hello Greeting
  (514) What's up? Question
  (122) Come over here Order
• 贾斯丁:(123)你好，欢迎(514)怎么了?问题(122)请按顺序过来

• recent:
  (1255) Hello Greeting
  (6564) What's up? Question
  (0192) Come over here Order
• (1255) Hello问候语(6564)What’s up?问题(0192)请过来

• old:
  (5213) Hello Greeting
  (9758) What's up? Question
  (7655) Come over here Order
• 老:(5213)你好(9758)怎么了?问题(7655)请到这边来。

Also, remember to set the contentType as 'json'

另外，请记住将内容类型设置为“json”

#4

My solutions in one of my own sites, with a table:

我的解决方案在我自己的一个网站，有一个表格:

$.getJSON("sections/view_numbers_update.php", function(data) {
 $.each(data, function(index, objNumber) {
  $('#tr_' + objNumber.intID).find("td").eq(3).html(objNumber.datLastCalled);
  $('#tr_' + objNumber.intID).find("td").eq(4).html(objNumber.strStatus);
  $('#tr_' + objNumber.intID).find("td").eq(5).html(objNumber.intDuration);
  $('#tr_' + objNumber.intID).find("td").eq(6).html(objNumber.blnWasHuman);
 });
});

sections/view_numbers_update.php Returns something like:

部分/ view_numbers_update。php返回类似:

[{"intID":"19","datLastCalled":"Thu, 10 Jan 13 08:52:20 +0000","strStatus":"Completed","intDuration":"0:04 secs","blnWasHuman":"Yes","datModified":1357807940},
{"intID":"22","datLastCalled":"Thu, 10 Jan 13 08:54:43 +0000","strStatus":"Completed","intDuration":"0:00 secs","blnWasHuman":"Yes","datModified":1357808079}]

HTML table:

HTML表:

<table id="table_numbers">
 <tr>
  <th>[...]</th>
  <th>[...]</th>
  <th>[...]</th>
  <th>Last Call</th>
  <th>Status</th>
  <th>Duration</th>
  <th>Human?</th>
  <th>[...]</th>
 </tr>
 <tr id="tr_123456">
  [...]
 </tr>
</table>

This essentially gives every row a unique id preceding with 'tr_' to allow for other numbered element ids, at server script time. The jQuery script then just gets this TR_[id] element, and fills the correct indexed cell with the json return.

这实际上给了每一行在“tr_”之前的唯一id，以便在服务器脚本时允许使用其他编号的元素id。jQuery脚本然后只获取TR_[id]元素，并用json返回填充已索引的正确单元格。

The advantage is you could get the complete array from the DB, and either foreach($array as $record) to create the table html, OR (if there is an update request) you can die(json_encode($array)) before displaying the table, all in the same page, but same display code.

优点是可以从DB获得完整的数组，并且foreach($array作为$record)来创建表html，或者(如果有更新请求)可以在显示表之前死去(json_encode($array))，所有这些都在相同的页面中，但是显示代码是相同的。