带有 JSON 数组的 jQuery 'each' 循环

Posted 2023-03-16

【中文标题】带有 JSON 数组的 jQuery \'each\' 循环

【英文标题】：jQuery 'each' loop with JSON array带有 JSON 数组的 jQuery 'each' 循环

【发布时间】：2011-03-03 02:24:05

【问题描述】：

我正在尝试使用 jQuery 的 each 循环来遍历此 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" 
 ]

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

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

) 

有什么解决办法吗？

【问题讨论】：

你有你要制作的html的模板吗？

【参考方案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);
        );
    );
); 

【讨论】：

@downvoter - 什么值得反对？请解释一下，我想知道有什么问题。

清晰、简洁、优雅！

嗨@karim79 如何在上面显示单个/特定项目数组？是'警报（k1 + ' ' + v1[0].TextType）？。我试过了，但我收到了“未定义”错误消息

【参考方案2】：

这对我有用：

$.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) Hello 问候(514) 怎么了？ 问题(122) 过来订购 最近：(1255) 你好问候(6564) 怎么了？问题(0192) 过来订购 老：(5213) Hello 问候(9758) 怎么了？ 问题(7655) 过来订购

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

【参考方案3】：

代码简短但功能齐全

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

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

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

过来

【参考方案4】：

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

$.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 返回类似：

["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，或者（如果有更新请求）你可以死（json_encode($array) ) 在显示表格之前，都在同一页面，但显示代码相同。