Auto convert json into dashboard table

General
1

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" }
2

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: http://mustache.github.io/mustache.5.html

r-01
r-01.PNG422Ă—753 19.7 KB 

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <ul>{{#payload.Device_Num_338.states}}
            <li>{{id}}, {{variable}}, {{value}}</li>
        {{/payload.Device_Num_338.states}}
        </ul>
</body>
</html>

Flow:

[{"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}]
3

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.

4

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):

payload.*.states[].{
    "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:

<table>
  <tr>
    <th>Variable</th>
    <th>Value</th>
  </tr>
{{#payload}}
  <tr>
    <td>{{variable}}</td>
    <td>{{value}}</td>
  </tr>
{{/payload}}
</table>

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
5
1 Like
6

Hi,

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">
        <td>{{v.id}}</td>
        <td>{{v.service}}</td>
    </tr>
</table>
4 Likes