Распределение вывода массива JSON на каждый <li> - PullRequest
Новая
       4

Распределение вывода массива JSON на каждый <li>

3 голосов
/ 10 января 2012

У меня есть вывод в формате 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, и мне нужно только показать один MachineID на <li>, вывод должен быть таким: 

    Foo 171914
    Bar 172233
    Baz 41116
    Qux 178077

и т. Д.

Ответы [ 2 ]

4 голосов
/ 10 января 2012

Если это существующие элементы 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/

0 голосов
/ 10 января 2012

Поскольку вы просматриваете каждый объект и каждое свойство, добавляемое к каждому объекту, в 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. Возможно, для вашего случая вам понадобится другая логика, чтобы найти нужную ли.

...