Javascript 如何将JSON树转换为动态HTML表_Javascript_Json_Node Red

Javascript 如何将JSON树转换为动态HTML表

javascript json

Javascript 如何将JSON树转换为动态HTML表,javascript,json,node-red,Javascript,Json,Node Red,（首先，请允许我说，我刚刚开始学习Node RED概念；我在nodered.org上阅读了一些初学者指南，现在我正在尝试扩展我迄今所学的内容）。我试图构建一个从简单的JSON树开始的流，比如 [{"position":"1", "title":"element #1"}, {"position":"2", "title":"element #2"}, {"position":"3", "title":"element #3"}] 要构建该树，我使用模板节点，属性设置为msg.payload。

（首先，请允许我说，我刚刚开始学习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表。为此，我使用了一个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>

而不是

<tr><td>1</td>

等等

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

问题:

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

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

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

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

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

再次感谢@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>


#
标题
{{{#有效载荷}
{{position}}
{{title}}
{{/payload}

与@als9xd示例的不同之处在于，我将

{{{{each payload}}

替换为一个简单的

{{{{each payload}}

，并在引用对象键时省略了

this

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

不管怎么说，这开始很有趣了

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


#
标题
{{{#有效载荷}
{{position}}
{{title}}
{{/payload}

与@als9xd示例的不同之处在于，我将

{{{{each payload}}

替换为一个简单的

{{{{each payload}}

，并在引用对象键时省略了

this

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

不管怎么说，这开始很有趣了

小结

ii如果你做了console.log（row）
你看到你想要的数据了吗？是的，我看到了；我忘了在我的问题中提到这一点ii如果你做了console.log（row）
你看到你想要的数据了吗？是的，我看到了；我忘了在我的问题中提到这一点。完美的，{{{{{{{payload}}}}就是这样做的。初学者指南中没有提到这一点。我同意，{{{{each}}变体事实上是我希望使用的，只要我知道它的存在：D.真的需要多读一点——谢谢，我只是尝试了另一种选择；接收调试消息“未关闭的部分“每个有效负载”；将结束部分更改为{{/each payload}}，这样就删除了错误，但表仍然为空。仍在试验…添加了我自己的答案，因为我终于让您的“优雅”代码版本开始工作，但有一些小的差异；对一个评论来说太长了……太完美了，{{{{{payload}}}成功了。初学者指南中没有提到这一点。我同意，{{{{each}}变体事实上是我希望使用的，只要我知道它的存在：D.真的需要多读一点——谢谢，我只是尝试了另一种选择；接收调试消息“未关闭的部分“每个有效负载”；将结束部分更改为{{/each payload}}，这样就删除了错误，但表仍然为空。仍在试验…添加了我自己的答案，因为我终于让您的“优雅”代码版本开始工作，但有一些小的差异；太长了，我无法发表评论。。。