# Auto convert json into dashboard table
**URL:** https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922
**Category:** General
**Created:** [6 September 2018 22:50 UTC](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922 "2018-09-06T22:50:01Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@nodecentral](https://discourse.nodered.org/u/nodecentral)
#### Post date: [6 September 2018 22:50 UTC](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922/1 "2018-09-06T22:50:01Z")
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" }
```
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [6 September 2018 23:14 UTC](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922/2 "2018-09-06T23:14:08Z")
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](http://mustache.github.io/mustache.5.html)
```auto
{{#payload.Device_Num_338.states}}
- {{id}}, {{variable}}, {{value}}
{{/payload.Device_Num_338.states}}
```
Flow:
```auto
[{"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":"\n\n \n \n {{#payload.Device_Num_338.states}}\n - {{id}}, {{variable}}, {{value}}
\n {{/payload.Device_Num_338.states}}\n
\n\n","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":"","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}]
```
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [6 September 2018 23:17 UTC](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922/3 "2018-09-06T23:17:42Z")
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.
---
### Author:  [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [7 September 2018 03:09 UTC](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922/4 "2018-09-07T03:09:37Z")
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):
```auto
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:
```auto
| Variable |
Value |
{{#payload}}
| {{variable}} |
{{value}} |
{{/payload}}
```
With the html table as input to a `ui_template` node using the default content, the rendered table will be inserted into an empty `` element.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [7 September 2018 13:34 UTC](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922/5 "2018-09-07T13:34:51Z")
> **[node-red-contrib-tableify](https://flows.nodered.org/node/node-red-contrib-tableify)**
>
> Uses npm package tableify to convert json into an html table. Returns the html in msg.payload
---
### Author:  [@nisiyama](https://discourse.nodered.org/u/nisiyama)
#### Post date: [8 September 2018 00:05 UTC](https://discourse.nodered.org/t/auto-convert-json-into-dashboard-table/2922/6 "2018-09-08T00:05:26Z")
Hi,
Instead of converting JSON to HTML in server side, you may also use `ng-repeat` in `ui_template` node.
```auto
```