Create HTML table with data in payload array

General
1

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 via a http request node and save the needed data in a payload array. The payload has the following structure.

weather
weather.JPG1738Ă—729 112 KB

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

1 Like
2

The table should have the following structure:

table
table.JPG1103Ă—130 25.6 KB

3

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?

4

Hi,
actually I tried to learn something from the following flow:
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

5

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

6

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": []
    }
]
7

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