jquery $ .each вложен в другое $ each. получать данные из JSON

Question

Я хочу, чтобы получить все значения из JSON так:

{ 
    "id" : "1", 
    "latitude" : "-3.7462186", 
    "longitude" : "-38.5394332", 
    "array":["9","2","3"] 
} 
{ 
    "id" : "2", 
    "latitude" : "-3.9082186", 
    "longitude" : "-3.5394332", 
    "array":["1","1","1"] 
} 
{ 
    "id" : "3", 
    "latitude" : "-4.7462186", 
    "longitude" : "-35.5394332", 
    "array":["2","2","3"] 
} 

И поместить их в HTML-таблице. Я попытался сделать это с помощью метода $ .getJSON с двумя вложенными $ .each (jQuery), чтобы попытаться получить все значения (включая значения массивов) для каждого из этих объектов и поместить их в таблицу в том же заказ:

$.getJSON(URL, function (value) { 
    $.each(value, function(i,e) { 
     $('#table').append('<tr> <td>'+ e.id+'</td> <td>'+ e.latitude +'</td> <td> '+e.longitude+'</td> '); 
      $.each(e.array,function(i) 
      { 
       $('#table').append('<td>'+e.array[i]+'</td>'); 
      }); 
     }); 
     $('#table').append('</tr>'); 
    } 
}); 

Но проблема в том, что «идентификатор», «широта» и «долгота» от каждого объекта помещается в правильной строке и все значения массива помещаются в последняя строка.

Как это:

id  | latitude | longitude | array1 | array2 | array3 | 
    1 | -3.7462186 | -38.5394332 | 
    2 | -3.9082186 | -3.5394332 | 
    3 | -4.7462186 | -35.5394332 | 
    9 |  2  |  3  |  1  | 1  | 1  | 2 | 2 | 3 

Какой правильно вложенная структура, что я должен следовать, чтобы решить эту проблему?

спасибо.

Answer 1

Метод .append() при использовании со строками должен иметь целую цепочку с открывающимися и закрывающимися тегами. В противном случае он закроет все элементы, которые не имеют соответствующих закрывающих тегов. Следующий подход объединяет полную строку, row, прежде чем передать ее .append().

var row = ''; 
$.each(value, function(i,e) { 
    row = '<tr> <td>'+ e.id+'</td> <td>'+ e.latitude +'</td> <td> '+e.longitude+'</td> '; 
    $.each(e.array,function(i) { 
     row += '<td>'+e.array[i]+'</td>'; 
    }); 
}); 
row += '</tr>'; 
$('#table tbody').append(row); 

Answer 2

Изменение сокровенное each к:

 $.each(e.array,function(ind, obj) 
     { 
      $('#table').append('<td>'+obj+'</td>'); 
     });