Question

（首先，我要说的是，我才刚刚开始学习Node-RED概念；我在nodered.org上浏览了一些初学者的指南，现在正在尝试扩展到目前为止所学的知识）。我正在尝试构建以简单的JSON树（如

）开头的流

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

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

接下来，我希望将该对象解析为动态html表。为此，我使用了一个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>

我本来希望函数的结果插入到模板的静态表中，但确实发生了，但不是我希望的那样：某种程度上，由函数创建的html元素不应该被识别为它们应具有的功能;相反，我看到它们被渲染为

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

代替

<tr><td>1</td>

等

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

问题：

我需要做些什么，以便我的第二个模板将我计算出的字符串识别为一组html元素？
还是这可能不适合我的目的？

Answer 1

我假设您在模板引擎中使用手把。在这种情况下，请使用：

{{{ 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表

2 个答案: