关于javascript：如何将JSON树转换为动态HTML表


How to convert a JSON tree to a dynamic HTML table

(首先，请允许我说，我刚刚开始学习节点红色概念；我在node red.org上学习了一些初学者指南，现在正在尝试扩展我学到的内容)。我正在尝试构建一个以类似于

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;

然后，应该将函数的输出传递到第二个模板中，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head></head>
    <body>
        <table border="1">
            <tr>
                <td>#</td>
                <td>Title</td>
            </tr>
            {{ payload }}
        </table>
    </body>
</html>

我本以为函数的结果会被插入到我的模板的静态表中，这确实发生了，但不是我希望的那样：不知何故，由我的函数创建的HTML元素不会被识别为它们应该是什么；相反，我看到它们被呈现为

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

而不是

1
<tr><td>1</td>

等。

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

问题：

  • 我需要做什么才能使我的第二个模板将计算字符串识别为一组HTML元素？
  • 或者这个概念不适合我的目的？
相关讨论

我假设您使用的是模板引擎的扶手。在这种情况下，使用：

1
{{{ payload }}}

而不是

1
{{ payload }}

然而，更优雅的方法是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

然后只是

1
return msg.payload
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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的例子不同的是，我用一个简单的{{#payload}}替换了{{#each payload}}，在引用对象键时省略了this。

这可能是由于不同的节点红色版本造成的吗？

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