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

时间:2012-01-10 15:46:23

标签: jquery json each

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

依旧......

2 个答案:

答案 0 :(得分:4)

如果这些是现有的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/

答案 1 :(得分:0)

因为你遍历每个对象和每个对象附加的每个属性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。