Рендеринг / отображение файла JSON в HTML через JQuery

Question

как отобразить этот файл json с помощью jquery?

[ { "code":"00-002159", "lastname":"SALUNGA", "firstname":"JEFFERSON" },
  { "code":"00-002160", "lastname":"TUMANAN", "firstname":"RHODA" } ]

и выглядит вот так

<table>
<thead>
<tr>
<th>code</th>   <th>lastname</th>          <th>firstname</th>
</tr>
</thead>
<tbody>
<tr>
<td>00-002159</td>     <td>SALUNGA </td>          <td>JEFFERSON</td>
<td>00-002160 </td>    <td>TUMANAN </td>          <td>RHODA</td>
</tr>
</tbody>
</table>

Answer 1

jQuery.template должен быть хорошим подходом для отображения данных.

Answer 2

см. Эту ссылку также очень полезно

Цикл по списку объектов JSON

Я неправильно отформатировал строку, пожалуйста, проверьте, что

Предположим, ваш JSON имеет этот формат

[ { "code":"00-002159", "lastname":"SALUNGA", "firstname":"JEFFERSON" }, { "code":"00-002160", "lastname":"TUMANAN", "firstname":"RHODA" } ]

Предположим, у вас есть ответ в объекте кодов

var finalHtml='';

finalHtml='<table>
<thead>
<tr>
<th>code</th>   <th>lastname</th>          <th>firstname</th>
</tr>
</thead>
<tbody>
<tr>'
    for(i=0; i< codes.length;i++)
    {

       //store the values and paint the html
       finalHtml+=<td>0codes[i].code;</td>     <td>codes[i].lastname </td>          <td>JEFFERSON</td>;      
    }
</tr>
</tbody>
</table>'

наконец-то присоединиться к DOM

есть контейнер и сделайте

$('#containerID').html(finalHtml);

Answer 3

Анализ данных JSON, данные, которые вы упоминаете в примере, это массив объектов

var data = [ { "code":"00-002159", "lastname":"SALUNGA", "firstname":"JEFFERSON" },
             { "code":"00-002160", "lastname":"TUMANAN", "firstname":"RHODA" } ]

[] - Represents js array и {} - Represents js Object Таким образом, для анализа данных и получения RHODA используйте data[0].firstname;

Answer 4

Вы можете попробовать это ...

<script type='text/javascript'>
var data = [ { "code":"00-002159", "lastname":"SALUNGA", "firstname":"JEFFERSON" }, { "code":"00-002160", "lastname":"TUMANAN", "firstname":"RHODA" } ];
var string = "";
   $.each(data, function() {
      $.each(this, function(k, v) {
        v += " ";
        string += v;
      });
    });
    alert(string);
</script>