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 using:
var arr =[67.4, 69.5, 72.5, 67.8, 65.0];
msg.payload = arr;
return msg;
In real life you probably have a sensor generating the data.
Next, we will display the table using the template node. Here is what we use in the template node:
<table id="table" border="1">
<tr>
<th>Temperature</th>
</tr>
<tbody>
<tr ng-repeat="row in msg.payload">
<td class="numeric" >{{row}}</td>
</tr>
</tbody>
</table>
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:
Temperature |
|---|
| 67.4 |
| 69.5 |
| 72.5 |
| 67.8 |
| 65.0 |
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}]
