Display array in html template

General
1

Hi all,

I have some issues to display an array in a table with an html template.
When I use the UI table it works correctly but when I use the same html code in a template node the data doesn't show up.

Array:

[{"ID":14,"melder":"Test","locatie":"ergens"},{"ID":3,"melder":"Test2","locatie":"ergens2"},{"ID":26,"melder":"Test3","locatie":"ergens3"}]

HTML code I use in the Template Node:

<html>
  <head>
    <title>Formulier</title>
  </head>
  <body>
<table style="height:auto">

  <tr>
    <th>ID</th>
    <th>Melder</th> 
    <th>Locatie</th>
  </tr>
  <tr ng-repeat="x in msg.payload | limitTo:50">
    <td>{{msg.payload[$index].ID}}</td>
    <td>{{msg.payload[$index].melder}}</td> 
    <td>{{msg.payload[$index].locatie}}</td>
  </tr>
</table>

</body>
</html>

Flow:

[
    {
        "id": "363608d05129e132",
        "type": "ui_template",
        "z": "bc462073da9f0465",
        "group": "83ea2fa55ee10ce1",
        "name": "UI table",
        "order": 9,
        "width": "18",
        "height": "11",
        "format": "<table style=\"height:auto%\">\n\n  <tr>\n    <th>ID</th>\n    <th>Melder</th> \n    <th>Locatie</th>\n  </tr>\n  <tr ng-repeat=\"x in msg.payload | limitTo:50\">\n    <td>{{msg.payload[$index].ID}}</td>\n    <td>{{msg.payload[$index].melder}}</td> \n    <td>{{msg.payload[$index].locatie}}</td>\n  </tr>\n</table>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 640,
        "y": 1520,
        "wires": [
            []
        ]
    },
    {
        "id": "28199df4828ed016",
        "type": "http in",
        "z": "bc462073da9f0465",
        "name": "",
        "url": "test1",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 230,
        "y": 1480,
        "wires": [
            [
                "7c23884fcba9d896"
            ]
        ]
    },
    {
        "id": "1d668fe7fae31712",
        "type": "template",
        "z": "bc462073da9f0465",
        "name": "HTML",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<html>\n  <head>\n    <title>Formulier</title>\n  </head>\n  <body>\n<table style=\"height:auto\">\n\n  <tr>\n    <th>ID</th>\n    <th>Melder</th> \n    <th>Locatie</th>\n  </tr>\n  <tr ng-repeat=\"x in msg.payload | limitTo:50\">\n    <td>{{msg.payload[$index].ID}}</td>\n    <td>{{msg.payload[$index].melder}}</td> \n    <td>{{msg.payload[$index].locatie}}</td>\n  </tr>\n</table>\n\n</body>\n</html>",
        "x": 550,
        "y": 1480,
        "wires": [
            [
                "a8b9109e872c3b51"
            ]
        ]
    },
    {
        "id": "a8b9109e872c3b51",
        "type": "http response",
        "z": "bc462073da9f0465",
        "name": "",
        "x": 650,
        "y": 1480,
        "wires": []
    },
    {
        "id": "6a8a4b94944551bb",
        "type": "inject",
        "z": "bc462073da9f0465",
        "name": "inject",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "str",
        "x": 270,
        "y": 1520,
        "wires": [
            [
                "7c23884fcba9d896"
            ]
        ]
    },
    {
        "id": "7c23884fcba9d896",
        "type": "function",
        "z": "bc462073da9f0465",
        "name": "function 37",
        "func": "msg.payload = [{\"ID\":14,\"melder\":\"Test\",\"locatie\":\"ergens\"},{\"ID\":3,\"melder\":\"Test2\",\"locatie\":\"ergens2\"},{\"ID\":26,\"melder\":\"Test3\",\"locatie\":\"ergens3\"}];\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 410,
        "y": 1480,
        "wires": [
            [
                "363608d05129e132",
                "1d668fe7fae31712",
                "61b800a1947cd0da"
            ]
        ]
    },
    {
        "id": "61b800a1947cd0da",
        "type": "debug",
        "z": "bc462073da9f0465",
        "name": "debug 47",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 560,
        "y": 1440,
        "wires": []
    },
    {
        "id": "83ea2fa55ee10ce1",
        "type": "ui_group",
        "name": "Dashboard",
        "tab": "a1921e.396b2de",
        "order": 1,
        "disp": true,
        "width": 19,
        "collapse": true
    },
    {
        "id": "a1921e.396b2de",
        "type": "ui_tab",
        "name": "Home",
        "icon": "home",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Does anybody know what's wrong?

Thank you in advance!
Duuk

2

That looks like code for the ui_template node, it wouldn't work in a template node.

In a ui_template node, you only need to provide a snippet not the whole web page, Dashboard defines most of the page. If you are using Angular to loop through data, you don't need the template node.

On the other hand, you could use the template node to create the html snippet and simply pass it to Dashboard as a 1-liner in the ui_template node. This way you do the processing in node-red, using just the ui_template, you are doing the processing in the browser.

3

Hi,

OK tha's why it won't work. I try to avoid the dashboard because I created my own menu, webpages, CSS with the template nodes.

4

In that case, you might want to note the recent threads on uibuilder low-code/no-code :wink:

5

I will.

I also found the solution but don't know if it's correct but it work :slight_smile:

<html>
  <head>
    <title>Formulier</title>
    <style>
        
table.GeneratedTable {
  width: 30%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-width: 1px;
  border-color: #000000;
  border-style: solid;
  color: #000000;
}

table.GeneratedTable td, table.GeneratedTable th {
  border-width: 1px;
  border-color: #000000;
  border-style: solid;
  padding: 3px;
}

table.GeneratedTable thead {
  background-color: #ffffff;
}
    </style>
  </head>
  <body>
      
  
      <table class="GeneratedTable">
    <thead>
    <tr>
      <th>Header</th>
      <th>Header</th>
      <th>Header</th>
    </tr>
  </thead>
         {{#payload}} 
  <tbody>
    <tr>
        <td>{{{ID}}}</td>
        <td>{{{melder}}}</td>
        <td>{{{locatie}}}</td>
    </tr>
  </tbody>
      {{/payload}}
</table>
   
</body>
</html>
6

mustache(5) - Logic-less templates. - shows you how to do loops and things.

Though if you are up for some playtime. Try out the v6.1.0 branch of uibuilder on GitHub which as the uib-element node that will output a table from an object or array input. You can also make it output table config JSON which can be fed direct to uibuilder but it will also allow you to add your own HMTL attributes so that you can style things.

7

Change

        {{#payload}} 
  <tbody>
    <tr>
        <td>{{{ID}}}</td>
        <td>{{{melder}}}</td>
        <td>{{{locatie}}}</td>
    </tr>
  </tbody>
      {{/payload}}

to:

        
  <tbody>
   {{#payload}} 
    <tr>
        <td>{{{ID}}}</td>
        <td>{{{melder}}}</td>
        <td>{{{locatie}}}</td>
    </tr>
  {{/payload}}
  </tbody>

else it will repeat the <tbody> as well

8

I did. Thank you.

1 Like
9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.