Javascript jQuery'；每个'；使用JSON数组循环

我试图使用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" }
 ]
}

我通过使用以下代码获得此JSON：

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

}) 

有什么解决方案吗？

试试（未经测试）：

我想，有三个独立的循环，因为您可能希望以不同的方式对待每个数据集（justIn、Nest、old）。如果没有，您可以执行以下操作：

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

这对我很有用：

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

$.get（“data.php”，函数（数据）{
var预期值=['justIn'，'recent'，'old']；
var-outString=''；
$。每个（预期，函数（i，val）{
var contentArray=data[val]；
突出+='
'+val+'：'；
$.each（contentArray，function（i1，val2）{
var textID=val2.textID；
var text=val2.text；
var textType=val2.textType；
突出显示+='
（'+textID+'）++'+text++'+textType；
});
突出+='
'；
});
$（“#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>

贾斯汀：


（123）你好问候语

怎么了？问题

过来点菜

最近：


（1255）你好问候语

（6564）怎么了？问题

（0192）过来点菜

旧的：


（5213）你好问候语

（9758）怎么了？问题

（7655）过来点菜

看起来是这样的：

贾斯汀：
（123）你好，你好吗？问题
（122）到这里来点菜

• 最近：
  （1255）你好问候
  （6564）怎么了？问题
  （0192）请到这里来订购

• 老：
  （5213）你好问候
  （9758）怎么了？问题（7655）请过来订购 另外，请记住将

  contentType

  设置为

  'json'

  简短但功能齐全的代码 下面是一个混合jQuery解决方案，它将每个数据“记录”格式化为一个HTML元素，并将数据的属性用作HTML属性值
  jquery

  每个
  运行内部循环；我需要外部循环上的常规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);
              });
      }
  
  });
  
  $.get（“data.php”，函数（数据）{
  for（数据中的var PROPTILE）{
  $('') 
  .addClass（'标题'）
  .insertBefore（“#contentHere”）
  .文本（标题）；
  $（数据[propTitle]）。每个（功能（iRec、oRec）{
  $('')
  .addClass（oRec.textType）
  .attr（'id'，'T'+oRec.textId）
  .insertBefore（“#contentHere”）
  .文本（俄勒冈州文本）；
  });
  }
  });
  
  产生输出
  
  （注意：我修改了JSON数据文本值，方法是在“调试”时预先添加一个数字，以确保以正确的顺序显示正确的记录）
  
  
  贾斯廷
  你好
  怎么了？
  过来
  最近的
  你好
  怎么了？
  过来
  古老的
  3你好
  怎么了？
  过来
  
  应用样式表
  
  <style>
  .heading { font-size: 24px; text-decoration:underline }
  .Greeting { color: green; }
  .Question { color: blue; }
  .Order { color: red; }
  </style>
  
  
  .标题{字体大小：24px；文本装饰：下划线}
  .问候语{颜色：绿色；}
  .问题{颜色：蓝色；}
  .顺序{颜色：红色；}
  
  获取一组“漂亮”的数据
  
  
  
  更多信息
  
  JSON数据的使用方式如下：
  
  对于每个类别（数组的键名）：
  
  
  关键字名称用作节标题（例如，justIn）
  
  对于阵列中的每个对象：
  
  
  “text”成为div的内容
  “textType”成为div的类（连接到样式表中）
  “textId”成为div的id
  e、 g.到这里来
  我的解决方案位于我自己的一个站点中，带有一个表：
  
  $.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\u numbers\u 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[id]元素，并用json返回值填充正确的索引单元格
  
  优点是您可以从数据库中获取完整的数组，或者foreach（$array as$record）创建表html，或者（如果有更新请求）您可以在显示表之前死亡（json_encode（$array）），都在同一页面中，但显示代码相同。
  您有要生成的html模板吗？@downvoter-什么保证了downvote？请解释一下，我想知道有什么问题。清晰、简洁、优雅！Hi@karim79如何显示上面的单个/特定项目数组？是否为“警报（k1+“”+v1[0]。文本类型）？。我正在尝试，但收到“未定义”错误消息
  [{"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}]
  
  <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>