I want to create a table using a template node.
I have a message object composed of circuit boards identified by serial numbers. Each circuit board has two channels that each have their own outputs.
These numbers may change though, for example some circuit boards in the future will have more channels or I will add another circuit board to the system. So I need the table to be created presumably using nested loops to traverse the message object and pull out whatever information is there at the time.
Here is an example of my object:
{ "serialNum": {
"1a": {
"channel": {
"0": {
"status": "running",
"value" : 100.0,
"setpoint": 200.0
},
"1": {
"status": "running",
"value" : 100.1,
"setpoint": 200.1
}
}
},
"2a": {
"channel": {
"0": {
"status": "running",
"value" : 200.0,
"setpoint": 300.0
},
"1": {
"status": "running",
"value" : 200.1,
"setpoint": 300.1
}
}
},
"3a": {
"channel": {
"0": {
"status": "stopped",
"value" : 300.0,
"setpoint": 400.0
},
"1": {
"status": "stopped",
"value" : 300.1,
"setpoint": 400.1
}
}
}
}
}
The table should look like this:
.
I think my key problem is not really understanding how to loop through the object in the template node to create the table. So I'm hoping someone here can provide some guidance on how to do this because surely this must be pretty simple. Here is my flow, thanks!:
[{"id":"3cb165b3.a1b84a","type":"tab","label":"Flow 6","disabled":false,"info":""},{"id":"28eaaa6e.7ca216","type":"function","z":"3cb165b3.a1b84a","name":"setup object","func":"var boards = {}\n\nboards = { \"serialNum\": {\n \"1a\": {\n \"channel\": {\n \"0\": {\n \"status\": \"running\",\n \"value\" : 100.0,\n \"setpoint\": 200.0\n },\n \"1\": {\n \"status\": \"running\",\n \"value\" : 100.1,\n \"setpoint\": 200.1\n }\n }\n },\n \"2a\": {\n \"channel\": {\n \"0\": {\n \"status\": \"running\",\n \"value\" : 200.0,\n \"setpoint\": 300.0\n },\n \"1\": {\n \"status\": \"running\",\n \"value\" : 200.1,\n \"setpoint\": 300.1\n }\n }\n },\n \"3a\": {\n \"channel\": {\n \"0\": {\n \"status\": \"stopped\",\n \"value\" : 300.0,\n \"setpoint\": 400.0\n },\n \"1\": {\n \"status\": \"stopped\",\n \"value\" : 300.1,\n \"setpoint\": 400.1\n }\n }\n }\n }\n }\n\nmsg.boardMsg = boards\nreturn msg;","outputs":1,"noerr":0,"x":513.560791015625,"y":283.78646087646484,"wires":[["b98cf582.ac0278","c26e6df8.fbfdd"]]},{"id":"9c1798b1.5f63e8","type":"inject","z":"3cb165b3.a1b84a","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":305.5642318725586,"y":283.8802366256714,"wires":[["28eaaa6e.7ca216"]]},{"id":"b98cf582.ac0278","type":"ui_template","z":"3cb165b3.a1b84a","group":"5fc682ac.589f8c","name":"","order":1,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n \n<style>\ntable, th , td {\n border: 1px solid grey;\n border-collapse: collapse;\n padding: 5px;\n}\ntable tr:nth-child(odd) {\n background-color: #f1f1f1;\n}\ntable tr:nth-child(even) {\n background-color: #ffffff;\n}\n</style>\n\n<table id=\"board status\" border=\"1\" width = 1000px height = 400px>\n <thead>\n <tr>\n <th>Serial #</th>\n <th>Channel #</th>\n <th>Status</th>\n <th>Value</th>\n <th>Setpoint</th>\n </tr>\n </thead>\n \n <tbody ng-repeat=\"serial in msg.boardMsg.serialNum\">\n <tr ng-repeat=\"channelNum in msg.boardMsg.serialNum[serial].channel\">\n <td> {{serial}} </td>\n <td>{{channelNum}}</td>\n <td ng-style = \"{color : msg.boardMsg.serialNum[serial].channel[channelNum].status === 'stopped' ? 'red' : 'green'}\">{{msg.boardMsg.serialNum[serial].channel[channelNum].status == \"stopped\" ? \"stopped\" : \"running\"}}</td> \n <td>{{msg.boardMsg.serialNum[serial].channel[channelNum].value</td>\n <td>{{msg.boardMsg.serialNum[serial].channel[channelNum].setpoint</td>\n </tr>\n </tbody>\n</table>\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":745.0086669921875,"y":288.00000524520874,"wires":[[]]},{"id":"c26e6df8.fbfdd","type":"debug","z":"3cb165b3.a1b84a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":721.5590744018555,"y":195.76044178009033,"wires":[]},{"id":"5fc682ac.589f8c","type":"ui_group","z":"","name":"template","tab":"a25212a6.c3a72","order":1,"disp":true,"width":25,"collapse":false},{"id":"a25212a6.c3a72","type":"ui_tab","z":"","name":"template","icon":"dashboard","order":8,"disabled":false,"hidden":false}]
