通过 jquery 将 json 文件渲染/显示为 html答案

【问题标题】：Render/display json file to html via jquery通过 jquery 将 json 文件渲染/显示为 html
【发布时间】：2011-07-11 07:11:50
【问题描述】：

如何使用 jquery 显示这个 json 文件？

[ { "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>

【问题讨论】：

你必须遍历对象并使用一些 html 来显示它。

标签： php jquery mysql json

【解决方案1】：

jQuery.template 应该是显示数据的好方法。

【讨论】：

【解决方案2】：

解析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;

【讨论】：

【解决方案3】：

你可以试试这个……

<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>

【讨论】：

【解决方案4】：

看这个链接也很有用

Loop through JSON object List

我没有正确格式化字符串，请检查

假设你的 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);

【讨论】：