Как преобразовать дерево JSON в динамическую таблицу HTML - PullRequest
Новая
       10

Как преобразовать дерево JSON в динамическую таблицу HTML

0 голосов
/ 11 декабря 2018

(Прежде всего позвольте мне сказать, что я только начинаю изучать концепции Node-RED; я просмотрел руководства для начинающих на nodered.org и сейчас пытаюсь расширить то, что я изучил до сих пор).Я пытаюсь построить поток, который начинается с простого дерева JSON, например 

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

. Для построения этого дерева я использую узел шаблона, свойство установлено в msg.payload.Количество элементов массива (в теории) является динамическим.Чтобы убедиться, что это дерево истинно JSON, я добавил узел JSON, преобразующий объект String в объект 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;

Выходные данные функции затем должны быть переданы во 2-й шаблон следующим образом:

<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-элементов?
  • или это, вероятно, концепция не подходит для моих целей?

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

еще раз спасибо @ als9xd за указание в правильном направлении;его вторая идея действительно звучит намного элегантнее, но сначала я не смог заставить ее работать.После некоторых проб и ошибок и поиска документации для узла шаблона я наконец-то пришел к следующему: удалил узел функции из моего исходного вопроса, а затем изменил 2-й шаблон для этого кода: 

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

В любом случае, это становится очень весело!

0 голосов
/ 11 декабря 2018

Я предполагаю, что вы используете гендельбары для своего движка шаблонов.В этом случае используйте: 

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