JSON数据到多个html表 [英] JSON data to multiple html tables

问题描述

我正在尝试获取一些JSON数据并创建多张HTML表.

i'm trying to take some JSON data and create mutliple HTML tables.

找到了很多有关创建动态表列的信息，而不是有关创建动态表的信息. http://www.encodedna.com /javascript/populate-json-data-to-html-table-using-javascript.htm

Finding a lot of info about creating dynamic table columns, but not about creating dynamic tables eg. http://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm

如何获取此json数据&为 每个 位置"创建一个单独的表， 然后 用数据填充表?

how to take this json data & create a separate table for each "LOCATION", then populate tables with data?

    [
{"ID":"7767544","LAST_NAME":"fdafa","FIRST_NAME":"Thomas","MODAL":"GENERAL ","LOCATION":"3E","STATUS":"Ordered"},
{"ID":"56345634","LAST_NAME":"fsdadadf","FIRST_NAME":"John","MODAL":"ULTRASOUND","LOCATION":"2D","STATUS":"Active"},
{"ID":"867586","LAST_NAME":"brbtr","FIRST_NAME":"William","MODAL":"THEATRE ","LOCATION":"3E","STATUS":"Active"},
{"ID":"654363456","LAST_NAME":"bjcvb","FIRST_NAME":"Frank","MODAL":"CT ","LOCATION":"EU","STATUS":"Active"},
{"ID":"2542543","LAST_NAME":"cvzx","FIRST_NAME":"Gur","MODAL":"GENERAL ","LOCATION":"1W","STATUS":"Ordered"},
{"ID":"4765454","LAST_NAME":"kluiu","FIRST_NAME":"Helen ","MODAL":"GENERAL ","LOCATION":"1W","STATUS":"Ordered"},
{"ID":"747564","LAST_NAME":"ertewr","FIRST_NAME":"Ingeborg","MODAL":"GENERAL ","LOCATION":"3B","STATUS":"Active"},
{"ID":"8798565","LAST_NAME":"gfhdgf","FIRST_NAME":"Elizabeth","MODAL":"GENERAL ","LOCATION":"1W","STATUS":"Ordered"},
{"ID":"9585676","LAST_NAME":"kjhkhj","FIRST_NAME":"John","MODAL":"ULTRASOUND","LOCATION":"3E","STATUS":"Pending"}
]

看起来像这样.....

to look like this.....

    <table id="location_3E">
<tr><th>ID</th><th>LAST_NAME</th><th>FIRSTNAME</th><th>MODAL</th></tr>
<tr><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td></tr>
</table>

<table id="location_2D">
<tr><th>ID</th><th>LAST_NAME</th><th>FIRSTNAME</th><th>MODAL</th></tr>
<tr><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td></tr>
</table>

<table id="location_EU">
<tr><th>ID</th><th>LAST_NAME</th><th>FIRSTNAME</th><th>MODAL</th></tr>
<tr><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td></tr>
</table>

<table id="location_1W">
<tr><th>ID</th><th>LAST_NAME</th><th>FIRSTNAME</th><th>MODAL</th></tr>
<tr><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td></tr>
</table>

<table id="location_3B">
<tr>
<th>ID</th><th>LAST_NAME</th><th>FIRSTNAME</th><th>MODAL</th></tr>
<tr><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td><td>*somedata*</td></tr>
</table>

推荐答案

我建议使用任何现有的模板引擎.已经有很多可以选择的了.我建议 HandlebarsJS ，因为这在所有这些语言中都最受欢迎.

I will suggest to use any existing template engine. There are plenty of there already from which you can choose one. I would suggest HandlebarsJS as this is most popular in all of them out there.

您也可以在网站上找到它的文档.

You can find the documentation there on the website too for it.

要解决您的问题，您想创建一个包含动态数据的表，该数据具有n个或多个行和m多个列.如果未定义列数，则需要针对每一行再次进行迭代，否则可以根据已知的列打印数据.

Coming to your problem, you want to create a table with dynamic data which has n number or rows and m number of columns. In case number of columns are not defined, you will need to iterate again for each row, otherwise you can print the data based on the column known.

这里是这样做的一个例子.参见在plnkr中工作.

Here is an example of doing that. See this workin plnkr.

把手模板如下:

<script id="grid-template" type="text/x-handlebars-template">
    <table>
      <thead> 
        {{#if data.length}}
          <tr>
            {{#each data.[0]}}
            <th>{{@key}}</th>
            {{/each}}
          </tr>
        {{/if}}
      </thead>
      <tbody>
        {{#each data}}
          <tr>
            {{#each this}}
            <td>{{@this}}</td>
            {{/each}}
          </tr>
        {{/each}}
      </tbody>
    </table>
  </script>

如果使用模板引擎，则需要非常小的JS.这是我的示例:

Very small JS will be required if you use template engines. Here is my example:

var grid = {
    data: tableData // coming from data.js
  };

  // Compiling Handlebars tempalte
  var gridTemplate = Handlebars.compile($("#grid-template").html());

  // Rendering Grid data in to HTML
  $("#grid-container").html(gridTemplate(grid));

尝试此工作示例

这篇关于JSON数据到多个html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！