# Display array in html template
**URL:** https://discourse.nodered.org/t/display-array-in-html-template/73782
**Category:** General
**Created:** [16 January 2023 20:20 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782 "2023-01-16T20:20:03Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Doek](https://discourse.nodered.org/u/Doek)
#### Post date: [16 January 2023 20:20 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782/1 "2023-01-16T20:20:04Z")
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:
```auto
[{"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:
```auto
Formulier
| ID |
Melder |
Locatie |
| {{msg.payload[$index].ID}} |
{{msg.payload[$index].melder}} |
{{msg.payload[$index].locatie}} |
```
Flow:
```auto
[
{
"id": "363608d05129e132",
"type": "ui_template",
"z": "bc462073da9f0465",
"group": "83ea2fa55ee10ce1",
"name": "UI table",
"order": 9,
"width": "18",
"height": "11",
"format": "\n\n \n | ID | \n Melder | \n Locatie | \n
\n \n | {{msg.payload[$index].ID}} | \n {{msg.payload[$index].melder}} | \n {{msg.payload[$index].locatie}} | \n
\n
",
"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": "\n \n Formulier\n \n \n\n\n \n | ID | \n Melder | \n Locatie | \n
\n \n | {{msg.payload[$index].ID}} | \n {{msg.payload[$index].melder}} | \n {{msg.payload[$index].locatie}} | \n
\n
\n\n\n",
"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
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [16 January 2023 20:30 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782/2 "2023-01-16T20:30:48Z")
> [@Doek](#):
>
> HTML code I use in the Template Node:
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.
---
### Author:  [@Doek](https://discourse.nodered.org/u/Doek)
#### Post date: [16 January 2023 20:48 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782/3 "2023-01-16T20:48:46Z")
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.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [16 January 2023 21:25 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782/4 "2023-01-16T21:25:37Z")
In that case, you might want to note the recent threads on uibuilder low-code/no-code 😉
---
### Author:  [@Doek](https://discourse.nodered.org/u/Doek)
#### Post date: [16 January 2023 21:33 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782/5 "2023-01-16T21:33:37Z")
I will.
I also found the solution but don't know if it's correct but it work 🙂
```auto
Formulier
| Header |
Header |
Header |
{{#payload}}
| {{{ID}}} |
{{{melder}}} |
{{{locatie}}} |
{{/payload}}
```
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [16 January 2023 23:58 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782/6 "2023-01-16T23:58:18Z")
[mustache(5) - Logic-less templates.](https://mustache.github.io/mustache.5.html) - 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.
---
### Author:  [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [17 January 2023 07:06 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782/7 "2023-01-17T07:06:22Z")
Change
```auto
{{#payload}}
| {{{ID}}} |
{{{melder}}} |
{{{locatie}}} |
{{/payload}}
```
to:
```auto
{{#payload}}
| {{{ID}}} |
{{{melder}}} |
{{{locatie}}} |
{{/payload}}
```
else it will repeat the `` as well
---
### Author:  [@Doek](https://discourse.nodered.org/u/Doek)
#### Post date: [17 January 2023 18:43 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782/8 "2023-01-17T18:43:18Z")
I did. Thank you.
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [18 March 2023 18:44 UTC](https://discourse.nodered.org/t/display-array-in-html-template/73782/9 "2023-03-18T18:44:09Z")
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.