将 json 数组输出分配给每个 <li>答案

【问题标题】：distributing json array output to each <li>将 json 数组输出分配给每个 <li>
【发布时间】：2012-02-07 00:40:48
【问题描述】：

我有一个 JSON 输出，我想在每个 <li> 中显示每个项目。

JSON 输出如下所示：

var data = [
{
    "MachineID":"171914",
    "Cost":"13,642.41",
    "Currency":"PHP"
},
{
    "MachineID":"172233",
    "Cost":"1,367.73",
    "Currency":"PHP"
},
{
    "MachineID":"41116",
    "Cost":"2,608.20",
    "Currency":"PHP"
},
{
    "MachineID":"178077",
    "Cost":"1,517.04",
    "Currency":"PHP"},
{
    "MachineID":"176430",
    "Cost":"20,876.72",
    "Currency":"PHP"
}
]

我的代码是这样的：

$.each(data, function(i, obj) {
    $.each(obj, function(i, val) {
      $('li').append(obj.MachineID); 
    });
});

现在结果如下所示：

富 171914171914171914172233172233172233411164111641116178077178077178077176430176430176430 酒吧 171914171914171914172233172233172233411164111641116178077178077178077176430176430176430

我可能忽略了jQuery.each 调用中的某些内容，我只需要为每个<li> 显示一个 MachineID，输出应该是这样的：

富 171914 酒吧 172233 巴兹 41116 曲克斯 178077

等等..

【问题讨论】：

标签： jquery json each

【解决方案1】：

如果这些是现有的li 元素，最好的方法是选择li 元素，对其进行迭代，并在迭代中使用索引来获取数据。

$('li').slice(0,data.length)
       .each(function(i,el){
           $(this).append(data[i].MachineID);
       });

我使用了.slice()，这样如果li 元素多于数据，它就不会尝试访问不存在的数据。

演示： http://jsfiddle.net/MYC4J/

如果<li> 元素尚不存在，那么您需要创建它们：

var ul = $('ul');

$.each(data,function(i,obj) {
    $('<li>',{text:obj.MachineID}).appendTo(ul);
});

演示： http://jsfiddle.net/MYC4J/1/

【讨论】：

【解决方案2】：

因为您遍历了每个对象以及为每个对象附加的每个属性 3 倍 MashineId。

您只需要 1 个 $.each-loop 并将 MashineId 附加到正确的 li。

类似的东西：

$.each(data, function(index, value){
   $("ul li:nth-child(" + (index+1) + ")").append(value.MashineId);
});

nth-child() 选择 li（基于 1 的索引）并附加 MashineId。这是因为您的 MashineIds 只是简单地添加到下一个 li 中。也许您需要另一种逻辑来找到正确的 li。

【讨论】：