如何将 JSON 树转换为动态 HTML table

Question

（首先请允许我说，我才刚刚开始学习 Node-RED 概念；我在 nodered.org 阅读了一些初学者指南，现在我正在尝试扩展我目前学到的知识） . 我正在尝试构建一个流程，该流程以一个简单的 JSON 树开始，例如

[{"position":"1", "title":"element #1"},
{"position":"2", "title":"element #2"},
{"position":"3", "title":"element #3"}]

为了构建该树，我使用模板节点，属性设置为 msg.payload。数组元素的数量（理论上）是动态的。为了确保这棵树是真的 JSON 我添加了一个 JSON 节点从字符串转换为 JSON 对象。

接下来我希望将该对象解析为动态 html table。为此，我使用了一个 JS 函数节点，它循环遍历对象并将其元素嵌入到相应的 html 元素中，如下所示：

var return="";
for(var i=0;i<=msg.payload.length-1;i++){
    var row=msg.payload[i];
    if(row){
        return+="<tr>";
        return+="<td>"+row.position+"</td>";
        return+="<td>"+row.title+"</td>";
        return+="</tr>";
    }else{
        return+="no object at index "+i.toString();
    }
}
msg.payload=return;
return msg;

函数的输出应该像这样传递到第二个模板中：

<html>
    <head></head>
    <body>
        <table border="1">
            <tr>
                <td>#</td>
                <td>Title</td>
            </tr>
            {{ payload }}
        </table>
    </body>
</html>

我希望函数的结果被插入到我的模板的静态 table 中，这确实发生了，但不是我希望的方式：不知何故 html 元素是由我的职能未被认可为应有的职能；相反，我看到它们呈现为

&lt;tr&gt;&lt;td&gt;1&lt;&#x2F;td&gt;&lt;

而不是

<tr><td>1</td>

等等

结果是浏览器无法识别这些元素并将它们与它们的内容一起打印在我的静态 table

之外

问题：

我需要做什么才能让我的第二个模板将我计算的字符串识别为一组 html 元素？
或者这可能是一个不符合我的目的的概念table？

Answer 1

我假设您正在为您的模板引擎使用 handelbars。在那种情况下使用：

{{{ payload }}}

而不是

{{ payload }}

然而，更优雅的方法是这样的：

<html>
    <head></head>
    <body>
        <table border="1">
            <tr>
                <td>#</td>
                <td>Title</td>
            </tr>
            {{#each payload}}
              <tr><td>{{this.position}}</td><td>{{this.title}}</td></tr>
            {{/each}}
        </table>
    </body>
</html>

然后

return msg.payload

Answer 2

再次感谢@als9xd 为我指明了正确的方向；他的第二个想法确实听起来更优雅，但首先我无法让它发挥作用。经过反复试验并查找模板节点的文档后，我终于想出了这个：从我原来的问题中删除了功能节点，然后将第二个模板更改为以下代码：

<html>
    <head></head>
    <body>
        <table border="1">
            <tr>
                <td>#</td>
                <td>Title</td>
            </tr>
            {{#payload}}
                <tr>
                    <td>{{position}}</td>
                    <td>{{title}}</td>
                </tr>
            {{/payload}}
        </table>
    </body>
</html>

与@als9xd 示例的不同之处在于，我将 {{#each payload}} 替换为简单的 {{#payload}}，并且在引用对象键时省略了 this。

这可能是由于不同的 Node-RED 版本造成的吗？

无论如何，这开始变得很有趣了！

如何将 JSON 树转换为动态 HTML table

How to convert a JSON tree to a dynamic HTML table

javascript

json

node-red