Fill a table with JSON data?

Hi all,

i want to fill a table in the dashboard , with data picked in the web :

This is what i do :
image

[{"id":"5c63cc2e.e0a584","type":"inject","z":"378c07b4.3c0cd8","name":"request 15min","topic":"","payload":"","payloadType":"date","repeat":"900","crontab":"","once":true,"onceDelay":"0.1","x":930,"y":4510,"wires":[["fc36758.3ae4f88"]]},{"id":"fc36758.3ae4f88","type":"http request","z":"378c07b4.3c0cd8","name":"","method":"GET","ret":"txt","paytoqs":false,"url":"http://www.meteofrance.com/previsions-meteo-france/draguignan/83300","tls":"","proxy":"","authType":"","x":944.2857131958008,"y":4597.357457637787,"wires":[["67ad5468.b4002c","e9af2b03.98a8f8"]]},{"id":"67ad5468.b4002c","type":"html","z":"378c07b4.3c0cd8","name":"","property":"","outproperty":"payload","tag":".day-summary-label","ret":"text","as":"single","x":1130,"y":4570,"wires":[["a61f9e58.f1e7c"]]},{"id":"e9af2b03.98a8f8","type":"html","z":"378c07b4.3c0cd8","name":"","property":"","outproperty":"payload","tag":".time-range-trigger","ret":"text","as":"single","x":1130,"y":4630,"wires":[["63fcf3dc.999a1c"]]},{"id":"63fcf3dc.999a1c","type":"function","z":"378c07b4.3c0cd8","name":"array to json","func":"// 14 17 20 23    2 5 8 11 14   8x2\n// 2 8 14 20 2                  4x5\n//  1                           1x7\n\nvar h1,h2,h3,h4,h5,h6,h7;\n\nh1 = msg.payload[0];\nh2 = msg.payload[1];\nh3 = msg.payload[2];\nh4 = msg.payload[3];\nh5 = msg.payload[4];\nh6 = msg.payload[5];\nh7 = msg.payload[6];\n\nnode.send ([{h1:h1,h2:h2,h3:h3,h4:h4,h5:h5,h6:h6,h7:h7}])\n\n\n","outputs":1,"noerr":0,"x":1310,"y":4630,"wires":[["59abdcee.ffae14","d2868511.5f2188"]]},{"id":"a61f9e58.f1e7c","type":"function","z":"378c07b4.3c0cd8","name":"array to json","func":"// 14 17 20 23    2 5 8 11 14   8x2\n// 2 8 14 20 2                  4x5\n//  1                           1x7\n\nvar a, b, c;\n\na = msg.payload[0];\nb = msg.payload[1];\nc = msg.payload[2];\nd = msg.payload[3];\ne = msg.payload[4];\nf = msg.payload[5];\n\nnode.send([{a:a,b:b,c:c,d:d,e:e,f:f}]);\n\n\n\n\n\n","outputs":1,"noerr":0,"x":1310,"y":4570,"wires":[["fc01e273.c9d87","d2868511.5f2188"]]},{"id":"fc01e273.c9d87","type":"debug","z":"378c07b4.3c0cd8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1470,"y":4570,"wires":[]},{"id":"d2868511.5f2188","type":"ui_template","z":"378c07b4.3c0cd8","group":"b378c06a.9dc79","name":"tableau meteo","order":3,"width":"10","height":"6","format":"<!DOCTYPE html>\n<html>\n<head>\n<style>\ntable {\n  font-family: arial, sans-serif;\n  border-collapse: collapse;\n  width: 100%;\n}\n\nth {\n  border: 1px solid #dddddd;\n  text-align: left;\n  padding: 8px;\n}\ntd {\n  border: 1px solid #dddddd;\n  text-align: left;\n  padding: 8px;\n  style=\"font-size:100%;\"\n}\n\ntr:nth-child(even) {\n  background-color: #666666;\n}\n</style>\n</head>\n<body>\n\n<h3>Prévision</h3>\n\n<table >\n  <caption>Météo </caption>\n  <tr>\n    <th>{{msg.h1}} à {{msg.h2}}</th>\n    <th>{{msg.h2}} à {{msg.h3}}</th> \n    <th>{{msg.h3}} à {{msg.h4}}</th>\n    <th>{{msg.h4}} à {{msg.h5}}</th>\n    <th>{{msg.h5}} à {{msg.h6}}</th>\n    <th>{{msg.h6}} à {{msg.h7}}</th>\n\n  </tr>\n  <tr>\n    <td>{{msg.a}}!!!!!!!</td>\n    <td>{{msg.b}}</td>\n    <td>{{msg.c}}</td>\n    <td>{{msg.d}}</td>\n    <td>{{msg.e}}</td>\n    <td>{{msg.f}}</td>\n  </tr>\n\n</table>\n\n</body>\n</html>\n\n<!--\nrow : ligne <tr>\ntable header : entete de table <th>, par defaut en gras et centré\ntable data : données <td> \nborder-collapse : 1 trait \npadding : hauteur des cellules (lignes)\ntext-align : position de la donnée dans la cellule\nborder-spacing: ecart entre les cellules (seulement si pas de collapse)\ncolspan : 2 si la cellule doit prendre 2 emplacements de colones\nrowspan : cellule prends 2 cellule en hauteur (lignes)\ncaption : legende au tableau\n\n\n\n\n-->","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":1500,"y":4600,"wires":[[]]},{"id":"59abdcee.ffae14","type":"debug","z":"378c07b4.3c0cd8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1470,"y":4630,"wires":[]},{"id":"b378c06a.9dc79","type":"ui_group","z":"","name":"Prevision :","tab":"f805ad6e.eddaa","order":2,"disp":true,"width":"10","collapse":true},{"id":"f805ad6e.eddaa","type":"ui_tab","z":"","name":"meteo","icon":"filter_drama","order":5,"disabled":false,"hidden":false}]

Where am i ? Lost, when i joint the two "array to json" functions to the "Template node" : the 1st dynamic row is displayed good , but the secund , displayed 1/2 seconds and disapear !

This is what i get:
image
note : exclamation points are here to test the table filling

This is the result i want :
image

Any Help is welcome , Thanks

Chris

A node in node-RED generally has no memory of previous messages. It just receives a message, does its thing and sends the output on.

So if you want to do what you are doing you will either need to look at joining the messages before the html node (look at the JOIN node) or think differently and do your formatting in serial rather than parallel.

Having a quick look at your flow you could probably do it in serial quite easily. By saving the two formatted parts as a different name in the msg object and then joining them at the end before sending the data to the html node

1 Like

Easy ! After looking a little bit for the operation of "join":
image

image
And the result is :
image
:slight_smile:

1 Like