28

我正在尝试使用 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){

})

有什么解决办法吗？

4

4 回答 4

56

尝试（未经测试）：

$.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);
        });
    });
});
于 2010-06-12T22:38:59.163 回答
9

代码简短但功能齐全

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

jqueryeach运行内部循环；我需要外部循环上的常规 JavaScriptfor才能获取属性名称（而不是值）以显示为标题。根据口味，它可以修改为略有不同的行为。

这只有 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>

获得一组“漂亮”的数据

替代文字

更多信息
JSON 数据的使用方式如下：

对于每个类别（数组所在的键名）：

  • 键名用作部分标题（例如justIn）

对于保存在数组中的每个对象：

  • 'text' 成为 div 的内容
  • 'textType' 成为 div 的类（挂钩到样式表中）
  • 'textId' 成为 div 的 id
  • eg <div id="T122" class="Order">过来</div>
于 2010-06-13T01:49:12.420 回答
5

这对我有用：

$.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）你好问候
    （6564）怎么了？问题
    (0192)过来订购
  • 老：
    （5213）你好问候
    （9758）怎么了？问题
    (7655)过来订购

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

于 2010-06-12T22:43:29.370 回答
0

我在自己的一个站点中的解决方案，带有一张表格：

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

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

这实质上为每一行提供了一个唯一的 id，前面带有 'tr_' 以允许在服务器脚本时使用其他编号的元素 id。jQuery 脚本然后只获取这个 TR_[id] 元素，并用 json 返回填充正确的索引单元格。

优点是您可以从数据库中获取完整的数组，并且可以使用 foreach($array as $record) 创建表 html，或者（如果有更新请求）您可以在显示之前 die(json_encode($array))表，都在同一页，但显示代码相同。

于 2013-01-10T13:23:34.180 回答