EXAMPLE (template) - displaying a one dimensional table

Problem: You need to display a table of temperatures.

Sample data (temperatures): 67.4, 69.5, 72.5, 67.8, 65.0

We will use a function node to create the table like this:
20%20AM

And display the table using the template node. Here is what we use in the template node:
02%20AM
Notice that the TR element has a ng-repeat option that is the key to displaying all rows of the table.

Here is what the display will look like:
27%20AM

the following is the flow that is used in this example:
[{"id":"ca42b7eb.b7725","type":"inject","z":"968ca76f.3dc46","name":"Go","topic":"","payload":"1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":90,"y":160,"wires":[["34ad1933.dbe566"]]},{"id":"34ad1933.dbe566","type":"function","z":"968ca76f.3dc46","name":"build array (1)","func":"var arr =[67.4, 69.5, 72.5, 67.8, 65.0];\nmsg.payload = arr;\nreturn msg;","outputs":1,"noerr":0,"x":260,"y":160,"wires":[["d4f28744.a9fa"]]},{"id":"d4f28744.a9fa","type":"ui_template","z":"968ca76f.3dc46","group":"b8630066.5d446","name":"One dimension array table (temperature)","order":1,"width":"6","height":"6","format":"<table id=\"table\" border=\"1\">\n <tr>\n <th>Temperature</th> \n </tr>\n <tbody>\n <tr ng-repeat=\"row in msg.payload\">\n <td class=\"numeric\" >{{row}}</td>\n </tr>\n </tbody>\n</table>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":520,"y":160,"wires":[["100f3061.79b17"]]},{"id":"100f3061.79b17","type":"debug","z":"968ca76f.3dc46","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":160,"wires":[]},{"id":"b8630066.5d446","type":"ui_group","z":"","name":"One dimension Array","tab":"f9ac9e91.20e588","order":1,"disp":true,"width":"6","collapse":false},{"id":"f9ac9e91.20e588","type":"ui_tab","z":"","name":"Table Examples","icon":"dashboard","order":1}]

2 Likes