jquery - 将 json 数组输出分配给每个

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/