如何在jsrender中呈现具有动态列和值的表？答案

【问题标题】：How to render a table with dynamic columns and values in jsrender?如何在jsrender中呈现具有动态列和值的表？
【发布时间】：2017-08-24 06:31:13
【问题描述】：

我有一个像

这样的数据集

{
"columns": [
  {
    "name": "COLUMN1",
    "code": "c1"
  },
  {
    "name": "COLUMN2",
    "code": "c2"
  },
  {
    "name": "COLUMN3",
    "code": "c3"
  },
  {
    "name": "COLUMN4",
    "code": "c4"
  }
],
"rows": [
  {
    "c1": 387,
    "c2": 347.618,
    "c3": 0,
    "c4": 39.282,
  },
  {
    "c1": 390,
    "c2": 3457.618,
    "c3": 0,
    "c4": 40.282
  },
        {
    "c1": 387,
    "c2": 3447.618,
    "c3": 0,
    "c4": 39.282
  },
        {
    "c2":10,
    "c3": 0,
    "c4": 39.282
  },
        {
    "c1": 387,
    "c2": 347.618,
    "c4": 100
  }
]
}

其中列的长度和行的长度不固定。现在我想渲染一个表格标题为column.name 应该可以通过列代码访问行值。（比如 COLUMN1 列，每一行的值应该是 row.c1 等等）。

我结合了很多关于 SO 的答案和一些关于 jsrender 的文档，并提出了如下解决方案：

<html>
<body>
<table>
    <thead>
        <tr>
            {{for columns}}
                <th class="right">{{:name}}</th>
            {{/for}}

        </tr>
    </thead>

    <tbody>
        {{for rows}}
            <tr>
                {{for columns ~data=#data}}
                    {{props #data}}
                        {{if key == "code"}}
                            <td class="right">{{:~data[prop]}}</td>
                        {{/if}}
                    {{/props}}
                {{/for}}
            </tr>
        {{/for}}
    </tbody>
</table>
</body>
</html>

谁能给我一个更好的方法来做到这一点？列数组和行数组之间的唯一映射是代码字段。如果您需要任何进一步的信息，请发表评论。

P.S：我根本无法更改数据结构。

【问题讨论】：

标签： jsrender jsreport

【解决方案1】：

看起来你可以做到：

{{for rows}}
    <tr>
        {{for ~root.columns ~row=#data}}
            <td class="right">{{:~row[code]}}</td>
        {{/for}}
    </tr>
{{/for}}

【讨论】：

我尝试了{{:~row[{{:code}}]}}，但使用{{:~row[code]}}这个简单的形式让我感到震惊。太棒了，谢谢你的帮助。
它给出了解析错误 {{for ~root.columns ~row=#data}}
语法正确。错误信息说什么？您使用的是最新版本的 jsrender/jsviews 吗？如果是这样，并且您有解析错误，请创建一个 jsfiddle，我会为您检查。