Auto convert json into dashboard table


Maybe a long shot, but is there anything within node Red that could automatically convert a JSON into a table that could be visable on the dashboard ?

I can make request to obtain a set of information (json format) about a device on my home automation controller - example below, (which would differ based on the device type)

{ "Device_Num_338": { "states": [ { "id": 168, "service": "urn:micasaverde-com:serviceId:SecuritySensor1", "variable": "Armed", "value": "0" }, { "id": 169, "service": "urn:micasaverde-com:serviceId:SecuritySensor1", "variable": "Tripped", "value": "0" }, { "id": 170, "service": "urn:micasaverde-com:serviceId:SecuritySensor1", "variable": "LastTrip", "value": "1536256617" }, { "id": 171, "service": "urn:micasaverde-com:serviceId:SecuritySensor1", "variable": "Timestamp", "value": "06\/09 18:56:57" }, { "id": 172, "service": "urn:micasaverde-com:serviceId:SecuritySensor1", "variable": "PreviousLastTrip", "value": "1523470055" }, { "id": 173, "service": "urn:micasaverde-com:serviceId:SecuritySensor1", "variable": "PreviousTimestamp", "value": "11\/04 19:11:31" }, { "id": 174, "service": "urn:micasaverde-com:serviceId:SecuritySensor1", "variable": "TripsSoFar", "value": "2" }, { "id": 175, "service": "urn:micasaverde-com:serviceId:HaDevice1", "variable": "LastUpdate", "value": "1536256622" }, { "id": 176, "service": "urn:micasaverde-com:serviceId:HaDevice1", "variable": "Configured", "value": "0" }, { "id": 177, "service": "urn:nodecentral-net:serviceId:SecuritySensor1", "variable": "TripCount", "value": "1" } ], "Jobs": [ ], "tooltip": { "display": 0 }, "status": -1 }, "LoadTime": 1536263791, "DataVersion": 263795575, "UserData_DataVersion": 263791113, "TimeStamp": 1536273233, "ZWaveStatus": 1, "LocalTime": "2018-09-06 23:33:53 N" }

Data from file to html chart
Node-red Bind data in HTML

If the complexity is not too high perhaps you can use simple mustache syntax in a template node and the use a UI template.

Have a look on session tags:

<!DOCTYPE html>
            <li>{{id}}, {{variable}}, {{value}}</li>


[{"id":"7990827b.2a24bc","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"69133e4e.4a38e","type":"inject","z":"7990827b.2a24bc","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":180,"wires":[["20325d4.738c4a2"]]},{"id":"20325d4.738c4a2","type":"function","z":"7990827b.2a24bc","name":"Build JSON","func":"msg.payload =\n\n{\n  \"Device_Num_338\": {\n    \"states\": [\n      {\n        \"id\": 168,\n        \"service\": \"urn:micasaverde-com:serviceId:SecuritySensor1\",\n        \"variable\": \"Armed\",\n        \"value\": \"0\"\n      },\n      {\n        \"id\": 169,\n        \"service\": \"urn:micasaverde-com:serviceId:SecuritySensor1\",\n        \"variable\": \"Tripped\",\n        \"value\": \"0\"\n      },\n      {\n        \"id\": 170,\n        \"service\": \"urn:micasaverde-com:serviceId:SecuritySensor1\",\n        \"variable\": \"LastTrip\",\n        \"value\": \"1536256617\"\n      },\n      {\n        \"id\": 171,\n        \"service\": \"urn:micasaverde-com:serviceId:SecuritySensor1\",\n        \"variable\": \"Timestamp\",\n        \"value\": \"06/09 18:56:57\"\n      },\n      {\n        \"id\": 172,\n        \"service\": \"urn:micasaverde-com:serviceId:SecuritySensor1\",\n        \"variable\": \"PreviousLastTrip\",\n        \"value\": \"1523470055\"\n      },\n      {\n        \"id\": 173,\n        \"service\": \"urn:micasaverde-com:serviceId:SecuritySensor1\",\n        \"variable\": \"PreviousTimestamp\",\n        \"value\": \"11/04 19:11:31\"\n      },\n      {\n        \"id\": 174,\n        \"service\": \"urn:micasaverde-com:serviceId:SecuritySensor1\",\n        \"variable\": \"TripsSoFar\",\n        \"value\": \"2\"\n      },\n      {\n        \"id\": 175,\n        \"service\": \"urn:micasaverde-com:serviceId:HaDevice1\",\n        \"variable\": \"LastUpdate\",\n        \"value\": \"1536256622\"\n      },\n      {\n        \"id\": 176,\n        \"service\": \"urn:micasaverde-com:serviceId:HaDevice1\",\n        \"variable\": \"Configured\",\n        \"value\": \"0\"\n      },\n      {\n        \"id\": 177,\n        \"service\": \"urn:nodecentral-net:serviceId:SecuritySensor1\",\n        \"variable\": \"TripCount\",\n        \"value\": \"1\"\n      }\n    ],\n    \"Jobs\": [],\n    \"tooltip\": {\n      \"display\": 0\n    },\n    \"status\": -1\n  },\n  \"LoadTime\": 1536263791,\n  \"DataVersion\": 263795575,\n  \"UserData_DataVersion\": 263791113,\n  \"TimeStamp\": 1536273233,\n  \"ZWaveStatus\": 1,\n  \"LocalTime\": \"2018-09-06 23:33:53 N\"\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":180,"wires":[["7b2d95a0.82ba0c"]]},{"id":"7b2d95a0.82ba0c","type":"template","z":"7990827b.2a24bc","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n    <head></head>\n    <body>\n        <ul>{{#payload.Device_Num_338.states}}\n            <li>{{id}}, {{variable}}, {{value}}</li>\n        {{/payload.Device_Num_338.states}}\n        </ul>\n</body>\n</html>","x":480,"y":180,"wires":[["39d2007b.a60e"]]},{"id":"c9e53e6d.2497c","type":"debug","z":"7990827b.2a24bc","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":790,"y":180,"wires":[]},{"id":"39d2007b.a60e","type":"ui_template","z":"7990827b.2a24bc","group":"3dfd1195.df4f4e","name":"","order":0,"width":"6","height":"10","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":640,"y":180,"wires":[["c9e53e6d.2497c"]]},{"id":"3dfd1195.df4f4e","type":"ui_group","z":"","name":"Test","tab":"d50effcd.c6b68","disp":true,"width":"6","collapse":false},{"id":"d50effcd.c6b68","type":"ui_tab","z":"","name":"Test","icon":"dashboard","order":5}]


There is an html table node someone contributed, that should do the job. You might have to tweak your JSON, a change node with JSONata should be able to do that.



Well, not exactly "automatic", but it's been done... What data would you expect to see, and how would it look inside an html table?

I suppose you would like to see all the states with their values? Does the payload ever contain more than one object (your example has "Device_Num_38")?

Since the property name will change for each device, I would first pull just the table data into the payload -- use a change node to "Set" msg.payload to the result of this JSONata expression (i.e. the J: option, not the {} JSON option):

    "id": id,
    "variable": variable,
    "value": $match(value, /\d{10}/) ? $fromMillis($number(value)*1000) : value

The $match statement is used to convert unix seconds to iso dates... Then you can pass that payload into a template node, and use {{mustache}} style iteration and variable substitution, like so:


With the html table as input to a ui_template node using the default content, the rendered table will be inserted into an empty <div> element.

1 Like




Instead of converting JSON to HTML in server side, you may also use ng-repeat in ui_template node.

<table border="1">
    <tr ng-repeat="(k,v) in msg.payload.Device_Num_338.states">