Question

我有一个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); 
    });
});

现在结果显示如下：

   Foo 171914171914171914172233172233172233411164111641116178077178077178077176430176430176430
   Bar 171914171914171914172233172233172233411164111641116178077178077178077176430176430176430

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

    Foo 171914
    Bar 172233
    Baz 41116
    Qux 178077

依旧......

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

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

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

2 个答案: