如何使用 node-json2html 将 json 显示为 html？答案

【问题标题】：How can I display json to html using node-json2html?如何使用 node-json2html 将 json 显示为 html？
【发布时间】：2015-09-03 00:57:11
【问题描述】：

我正在尝试将更复杂的 json 输出显示为 html，但我无法弄清楚应该如何使用 node-json2html 构造转换

我的 json 看起来像这样：

[
  {
    "name": "flight.LOL123 ",
    "columns": [
      "time",
      "sequence_number",
      "vert_rate",
      "messages",
      "squawk",
      "altitude",
      "lat",
      "lon",
      "validposition",
      "track",
      "validtrack",
      "speed",
      "seen",
      "hex"
    ],
    "points": [
      [
        1434558860921,
        98792710001,
        -512,
        1018,
        "4543",
        3325,
        15.74181,
        71.60743,
        1,
        290,
        1,
        207,
        0,
        "4692d4"
      ],
      [
        1434558000838,
        98401040001,
        0,
        4,
        "0000",
        25550,
        0,
        0,
        0,
        0,
        0,
        0,
        0,
        "4692d4"
      ]
    ]
  }
]

我得到了这个：

var transform = {'tag':'li','html':'${name}, ${points}'};

但它会生成包含名称的第一行，然后所有点都在一条长线上。

谁能帮我尝试正确进行转换？

【问题讨论】：

标签： javascript html json node.js

【解决方案1】：

就我所见，与您提到的库示例相比，您使用的格式完全不同。

再次官方示例格式：

 var data = [{'male':'Bob','female':'Jane'},{'male':'Rick','female':'Ann'}];

您的格式是嵌套的，而不是应有的平坦。

【讨论】：

感谢德扬的回答！不幸的是，我无法更改格式，我还能以某种方式在 HTML 中显示它的可读性更高吗？
为什么不将对象传递给 Jade 并在翡翠文件中渲染？
不知道 Jade 可以为我做到这一点，我搜索过的所有地方 node-json2html 都回来了；谢谢！
甚至更好 - 使用 jspath(NPM) 进行任何花哨的过滤，然后您将大大简化的数据传递给 Jade。这是为了防止您无法让 Jade 与您的对象一起工作。

【解决方案2】：

使用mustache.js找到另一个更快更漂亮的解决方案

此代码用于我的原始 JSON：

            {{#.}}

            <div class="panel panel-info">
            <div class="panel-heading"><h2>Data for {{name}}</h2></div>
            <div class="panel-body"></div>

            <table  class="table table-striped">
            {{#columns}}
                <th>{{.}}</th>
            {{/columns}}

            {{#points}}
                <tr>
                  {{#.}}
                     <td>{{.}}</td>
                  {{/.}}
                </tr>
            {{/points}}

            {{/.}}
            </table>

            </div>

只有这些，我才能在心跳中填充 >5k 行的表格。很酷的东西！

【讨论】：