# Create HTML table with data in payload array

**URL:** <https://discourse.nodered.org/t/create-html-table-with-data-in-payload-array/5064>\
**Category:** General\
**Created:** [20 November 2018 10:03 UTC](https://discourse.nodered.org/t/create-html-table-with-data-in-payload-array/5064 "2018-11-20T10:03:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![manuel](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@manuel](https://discourse.nodered.org/u/manuel)\
**Post date:** [20 November 2018 10:03 UTC](https://discourse.nodered.org/t/create-html-table-with-data-in-payload-array/5064/1 "2018-11-20T10:03:02Z")

</div>

Hello,

I've been working with node red for some time and I am slowly getting used to it. I'm just biting my teeth out of a problem:  
I am calling weather data from [openweathermap.org](http://openweathermap.org) via a http request node and save the needed data in a payload array. The payload has the following structure.

 ![weather](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/58a275d767091688607f207eb007bf48e27678da.jpeg)

Now I want to create a dynamic HTML table out of the data in the payload. The table may vary in size depending on the data sets.

I mainly fail because I am not able to handle arrays and msg objects in the function node. Can you guys help me out with this?

Thank you!  
Manuel

---

<div class="post-metadata">

**Author:** ![manuel](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@manuel](https://discourse.nodered.org/u/manuel)\
**Post date:** [20 November 2018 10:04 UTC](https://discourse.nodered.org/t/create-html-table-with-data-in-payload-array/5064/2 "2018-11-20T10:04:10Z")

</div>

The table should have the following structure:

 ![table](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/51e89ad9ef49d19f2ac37eadacd09cbe8a122c2c.jpeg)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 November 2018 12:17 UTC](https://discourse.nodered.org/t/create-html-table-with-data-in-payload-array/5064/3 "2018-11-20T12:17:16Z")

</div>

Did you try going to the `flows` tab of this web site and searching for `table` (uncheck the `nodes` box) and seeing if there is something there that you could learn from?

---

<div class="post-metadata">

**Author:** ![manuel](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@manuel](https://discourse.nodered.org/u/manuel)\
**Post date:** [20 November 2018 16:06 UTC](https://discourse.nodered.org/t/create-html-table-with-data-in-payload-array/5064/4 "2018-11-20T16:06:20Z")

</div>

Hi,  
actually I tried to learn something from the following flow:  
[https://flows.nodered.org/flow/76cd6afbd14426f88656c90aedf10423](https://flows.nodered.org/flow/76cd6afbd14426f88656c90aedf10423)

I tried something like this ...  
`[{"id":"f9a18460.8648b8","type":"inject","z":"c8557530.baa8f8","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":290,"y":320,"wires":[["ad2be103.f3ef6"]]},{"id":"ad2be103.f3ef6","type":"function","z":"c8557530.baa8f8","name":"build array (2)","func":"var arr =[\n [\"20.11.2018\",\"19:00\",\"3.2\"],[\"20.11.2018\",\"22:00\",\"2.3\"],\n [\"21.11.2018\",\"01:00\",\"4.2\"],[\"21.11.2018\",\"04:00\",\"1.2\"],[\"21.11.2018\",\"07:00\",\"5.9\"],[\"21.11.2018\",\"07:00\",\"5.9\"],[\"21.11.2018\",\"10:00\",\"6.3\"],[\"21.11.2018\",\"13:00\",\"2.6\"],[\"21.11.2018\",\"16:00\",\"6.8\"],[\"21.11.2018\",\"19:00\",\"7.9\"],[\"21.11.2018\",\"22:00\",\"9.7\"],\n [\"22.11.2018\",\"01:00\",\"10.2\"],[\"22.11.2018\",\"04:00\",\"10.5\"],[\"22.11.2018\",\"07:00\",\"11.6\"],[\"22.11.2018\",\"07:00\",\"12.3\"],[\"21.11.2018\",\"10:00\",\"12.9\"],[\"21.11.2018\",\"13:00\",\"12.8\"],[\"22.11.2018\",\"16:00\",\"12.1\"],[\"22.11.2018\",\"19:00\",\"8.5\"],[\"22.11.2018\",\"22:00\",\"7.5\"],];\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":460,"y":320,"wires":[["4084d532.e203cc"]]},{"id":"95c036b9.7854a8","type":"debug","z":"c8557530.baa8f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":830,"y":320,"wires":[]},{"id":"4084d532.e203cc","type":"template","z":"c8557530.baa8f8","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<table id=\"table\" border=\"1\">\n <tr>\n <th ng-repeat=\"row in msg.payload.date\">{{msg.payload.date}}</th> \n </tr>\n <tbody>\n <tr>\n <td ng-repeat=\"msg.payload.time in row\" >{{msg.payload.time}}</td>\n </tr>\n <tr>\n <td ng-repeat=\"msg.payload.time in row\" >{{msg.payload.time}}</td>\n </tr>\n </tbody>\n</table>","output":"str","x":660,"y":320,"wires":[["95c036b9.7854a8"]]}]`

I know that this is nonsense ... however I don't know how it's right.

Thanks for everyone's advice.  
Manuel

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [20 November 2018 21:30 UTC](https://discourse.nodered.org/t/create-html-table-with-data-in-payload-array/5064/5 "2018-11-20T21:30:32Z")

</div>

Put a debug node on the output of the function node and look at the results and then review your template code.

---

<div class="post-metadata">

**Author:** ![manuel](https://avatars.discourse-cdn.com/v4/letter/m/67e7ee/32.png) [@manuel](https://discourse.nodered.org/u/manuel)\
**Post date:** [22 November 2018 12:55 UTC](https://discourse.nodered.org/t/create-html-table-with-data-in-payload-array/5064/6 "2018-11-22T12:55:04Z")

</div>

Hi,  
I debugged the function node like you said and tried to adjust the template node. However the template node does node take the variable values. I still don't get the syntax in the tamplete node. Maybe you can help me out there? Thank you!

```
 [
    {
        "id": "f9a18460.8648b8",
        "type": "inject",
        "z": "c8557530.baa8f8",
        "name": "Go",
        "topic": "",
        "payload": "1",
        "payloadType": "str",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": "",
        "x": 250,
        "y": 320,
        "wires": [
            [
                "bdb4934b.ae565"
            ]
        ]
    },
    {
        "id": "95c036b9.7854a8",
        "type": "debug",
        "z": "c8557530.baa8f8",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "x": 830,
        "y": 320,
        "wires": []
    },
    {
        "id": "4084d532.e203cc",
        "type": "template",
        "z": "c8557530.baa8f8",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<table id=\"table\" border=\"1\">\n <tr>\n <th ng-repeat=\"row in msg.payload.weather.date\">{{payload.weather.date}}</th> \n </tr>\n <tbody>\n <tr>\n <td ng-repeat=\"msg.payload.weather.time in row\" >{{payload.weather.time}}</td>\n </tr>\n <tr>\n <td ng-repeat=\"msg.payload.weather.time in row\" >{{payload.weather.windspeed}}</td>\n </tr>\n </tbody>\n</table>",
        "output": "str",
        "x": 660,
        "y": 320,
        "wires": [
            [
                "95c036b9.7854a8"
            ]
        ]
    },
    {
        "id": "bdb4934b.ae565",
        "type": "function",
        "z": "c8557530.baa8f8",
        "name": "build array",
        "func": "var arr ={\n \"weather\":[{\"timestamp\":1542898800000,\"windspeed\":1.21,\"date\":\"22.11.2018\",\"time\":\"16:00\"},{\"timestamp\":1542909600000,\"windspeed\":1.16,\"date\":\"22.11.2018\",\"time\":\"19:00\"},{\"timestamp\":1542920400000,\"windspeed\":1.11,\"date\":\"22.11.2018\",\"time\":\"22:00\"},{\"timestamp\":1542931200000,\"windspeed\":1.07,\"date\":\"23.11.2018\",\"time\":\"01:00\"},{\"timestamp\":1542942000000,\"windspeed\":1.07,\"date\":\"23.11.2018\",\"time\":\"04:00\"},{\"timestamp\":1542952800000,\"windspeed\":1.16,\"date\":\"23.11.2018\",\"time\":\"07:00\"},{\"timestamp\":1542963600000,\"windspeed\":2.06,\"date\":\"23.11.2018\",\"time\":\"10:00\"},{\"timestamp\":1542974400000,\"windspeed\":2.96,\"date\":\"23.11.2018\",\"time\":\"13:00\"},{\"timestamp\":1542985200000,\"windspeed\":3.23,\"date\":\"23.11.2018\",\"time\":\"16:00\"},{\"timestamp\":1542996000000,\"windspeed\":3.57,\"date\":\"23.11.2018\",\"time\":\"19:00\"},{\"timestamp\":1543006800000,\"windspeed\":3.72,\"date\":\"23.11.2018\",\"time\":\"22:00\"},{\"timestamp\":1543017600000,\"windspeed\":3.41,\"date\":\"24.11.2018\",\"time\":\"01:00\"},{\"timestamp\":1543028400000,\"windspeed\":1.86,\"date\":\"24.11.2018\",\"time\":\"04:00\"},{\"timestamp\":1543039200000,\"windspeed\":1.2,\"date\":\"24.11.2018\",\"time\":\"07:00\"},{\"timestamp\":1543050000000,\"windspeed\":1.76,\"date\":\"24.11.2018\",\"time\":\"10:00\"},{\"timestamp\":1543060800000,\"windspeed\":1.86,\"date\":\"24.11.2018\",\"time\":\"13:00\"},{\"timestamp\":1543071600000,\"windspeed\":1.3,\"date\":\"24.11.2018\",\"time\":\"16:00\"},{\"timestamp\":1543082400000,\"windspeed\":1.2,\"date\":\"24.11.2018\",\"time\":\"19:00\"},{\"timestamp\":1543093200000,\"windspeed\":1.14,\"date\":\"24.11.2018\",\"time\":\"22:00\"},{\"timestamp\":1543104000000,\"windspeed\":1.13,\"date\":\"25.11.2018\",\"time\":\"01:00\"},{\"timestamp\":1543114800000,\"windspeed\":1.16,\"date\":\"25.11.2018\",\"time\":\"04:00\"},{\"timestamp\":1543125600000,\"windspeed\":1.17,\"date\":\"25.11.2018\",\"time\":\"07:00\"},{\"timestamp\":1543136400000,\"windspeed\":1.68,\"date\":\"25.11.2018\",\"time\":\"10:00\"},{\"timestamp\":1543147200000,\"windspeed\":1.78,\"date\":\"25.11.2018\",\"time\":\"13:00\"},{\"timestamp\":1543158000000,\"windspeed\":2.81,\"date\":\"25.11.2018\",\"time\":\"16:00\"},{\"timestamp\":1543168800000,\"windspeed\":3.01,\"date\":\"25.11.2018\",\"time\":\"19:00\"},{\"timestamp\":1543179600000,\"windspeed\":2.56,\"date\":\"25.11.2018\",\"time\":\"22:00\"},{\"timestamp\":1543190400000,\"windspeed\":1.28,\"date\":\"26.11.2018\",\"time\":\"01:00\"},{\"timestamp\":1543201200000,\"windspeed\":0.93,\"date\":\"26.11.2018\",\"time\":\"04:00\"},{\"timestamp\":1543212000000,\"windspeed\":1.26,\"date\":\"26.11.2018\",\"time\":\"07:00\"},{\"timestamp\":1543222800000,\"windspeed\":2.58,\"date\":\"26.11.2018\",\"time\":\"10:00\"},{\"timestamp\":1543233600000,\"windspeed\":4.35,\"date\":\"26.11.2018\",\"time\":\"13:00\"},{\"timestamp\":1543244400000,\"windspeed\":4.83,\"date\":\"26.11.2018\",\"time\":\"16:00\"},{\"timestamp\":1543255200000,\"windspeed\":4.66,\"date\":\"26.11.2018\",\"time\":\"19:00\"},{\"timestamp\":1543266000000,\"windspeed\":4.26,\"date\":\"26.11.2018\",\"time\":\"22:00\"},{\"timestamp\":1543276800000,\"windspeed\":4.37,\"date\":\"27.11.2018\",\"time\":\"01:00\"},{\"timestamp\":1543287600000,\"windspeed\":4.71,\"date\":\"27.11.2018\",\"time\":\"04:00\"},{\"timestamp\":1543298400000,\"windspeed\":4.87,\"date\":\"27.11.2018\",\"time\":\"07:00\"},{\"timestamp\":1543309200000,\"windspeed\":5.26,\"date\":\"27.11.2018\",\"time\":\"10:00\"},{\"timestamp\":1543320000000,\"windspeed\":5.43,\"date\":\"27.11.2018\",\"time\":\"13:00\"}]\n \n \n};\n\nmsg.payload = arr;\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "x": 450,
        "y": 320,
        "wires": [
            [
                "4084d532.e203cc",
                "c9ad3c38.f6a3b"
            ]
        ]
    },
    {
        "id": "c9ad3c38.f6a3b",
        "type": "debug",
        "z": "c8557530.baa8f8",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "x": 660,
        "y": 220,
        "wires": []
    }
]
```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [22 November 2018 13:26 UTC](https://discourse.nodered.org/t/create-html-table-with-data-in-payload-array/5064/7 "2018-11-22T13:26:10Z")

</div>

In your template you have  
`<th ng-repeat="row in msg.payload.weather.date"></th>`  
in your debug I done see `date` that is part of `weather` which is part of `payload` which is part of `msg`

You might want to look at this [flow](https://flows.nodered.org/flow/76cd6afbd14426f88656c90aedf10423)