如何在不知道数据的情况下渲染动态表？使用 HTML 和 JS答案

【问题标题】：How to render dynamic table without knowing the data? using HTML and JS如何在不知道数据的情况下渲染动态表？使用 HTML 和 JS
【发布时间】：2017-12-14 09:18:11
【问题描述】：

动态我的意思是我不知道从 ajax 响应返回的数据是什么。我设法返回 {name:"" value:""} 对以获得一些杠杆作用。

样本数据：

[
  [
    {
      "name": "_id",
      "value": "5a32391133425e1f5436161b"
    },
    {
      "name": "Issue",
      "value": "Splash Screen Animations"
    },
    {
      "name": "Status",
      "value": "Done"
    },
    {
      "name": "Comment",
      "value": "The animation must be the same as ios"
    }
  ],
  [
    {
      "name": "_id",
      "value": "5a32391133425e1f5436161c"
    },
    {
      "name": "Issue",
      "value": "Live Streaming Title and Image"
    },
    {
      "name": "Status",
      "value": "Done"
    },
    {
      "name": "Comment",
      "value": "asdasd"
    }
  ],
]

那么如何在表格或把手模板中呈现这些数据？。知道名称应该在<thead>，值应该在<tbody>

我还设法将响应数据分成单独的数组（标题和数据），以便我可以如下呈现表格。

<script type="text/html" id="ViewDataTemplate">
    <table class="table table-hover">
        <thead>
            <tr>
                {{#each headers}}
                <th>{{this}}</th>
                {{/each}}
            </tr>
        </thead>
        <tbody>
            {{#each data}}
            <tr>
                {{#each this}}
                    <td>{{this}}</td>
                {{/each}}
            </tr>
            {{/each}}
        </tbody>
    </table>
</script>

请注意：我正在寻找的答案并非特定于车把，html/js 应该就足够了。

【问题讨论】：

有什么问题？通常，响应 data 应该有一个长度，以便通过您使用的模板或技术支持的任何循环方式，长度将成为您的表的行数。

标签： javascript jquery html handlebars.js

【解决方案1】：

您尚未向我们展示您的分离数据是什么样子（headers 和 data），但您很可能只需在正文单元格中添加缺少的 .value 引用即可获得所需的结果输出：

{{#each this}}
    <td>{{this.value}}</td>
{{/each}}

这种方法可行，但它对您的数据结构做出了一些假设。最重要的是，它假定每个行对象具有确切相同的属性，并且属性对象总是以相同的顺序（“_id”、“问题”、“状态", "评论")。

如果您对数据的一致性有信心，那么我什至不会费心将数据分成headers 和data。我只需从第一行对象中获取列标题，渲染它们，然后在整个数据数组上使用#each 来渲染正文。模板是：

<table class="table table-hover">
    <thead>
        <tr>
            {{#each (lookup this 0)}}
                <th>{{this.name}}</th>
            {{/each}}
        </tr>
    </thead>
    <tbody>
        {{#each this}}
            <tr>
                {{#each this}}
                    <td>{{this.value}}</td>
                {{/each}}
            </tr>
        {{/each}}
    </tbody>
</table>

这个模板唯一有趣的部分是lookup 助手的使用。这用于获取我们数据对象中的第一个数组 - 第一个“行” - 我们使用它来填充列标题。

同样，这仅在您的数据结构化使得每行具有相同的列对象并且这些对象的顺序相同的情况下才有效。如果您的数据难以预测，则需要更复杂的解决方案。如有需要，我可以提供。

我创建了一个fiddle 供您参考。

【讨论】：