How to use ngx-json-viewer on ui template node

[blackhawk263]

Hello

I'm looking for a way to display a json object as a collapsible element with the ui-template node.
I found this module which pretty much does what I need. But I couldn't figure out how to integrate it into my node-red installation.

From what I have read here it should be possible to use Angular directives.
In my case this would be <ngx-json-viewer [json]=msg.payload"></ngx-json-viewer> on the ui-template node.

Here's an example flow

[{"id":"8dd8bc61e88d5baf","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"fdfefd17c0f73572","type":"function","z":"8dd8bc61e88d5baf","name":"Build Payload","func":"msg.payload = {\n    \"simple key\": \"simple value\",\n    \"numbers\": 1234567,\n    \"simple list\": [\n        \"value1\",\n        22222,\n        \"value3\"\n    ],\n    \"owner\": null,\n    \"simple obect\": {\n        \"simple key\": \"simple value\",\n        \"numbers\": 1234567,\n        \"simple list\": [\n            \"value1\",\n            22222,\n            \"value3\"\n        ],\n        \"simple obect\": {\n            \"key1\": \"value1\",\n            \"key2\": 22222,\n            \"key3\": \"value3\"\n        }\n    }\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":440,"y":340,"wires":[["0568bb5360e44817","e913af9c7c5846b2","571eded6ab367c57"]]},{"id":"4f077dcfb4553f9f","type":"inject","z":"8dd8bc61e88d5baf","name":"Start Manual","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":340,"wires":[["fdfefd17c0f73572"]]},{"id":"0568bb5360e44817","type":"debug","z":"8dd8bc61e88d5baf","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":660,"y":260,"wires":[]},{"id":"e913af9c7c5846b2","type":"ui_template","z":"8dd8bc61e88d5baf","group":"648f4862f830ba65","name":"ng-bind-html","order":1,"width":12,"height":3,"format":"<h1>ng-bind-html</h1>\n<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":670,"y":340,"wires":[[]]},{"id":"571eded6ab367c57","type":"ui_template","z":"8dd8bc61e88d5baf","group":"648f4862f830ba65","name":"ngx-json-viewer","order":2,"width":12,"height":3,"format":"<h1>ngx-json-viewer<h1>\n<ngx-json-viewer [json]=\"msg.payload\"></ngx-json-viewer>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":680,"y":420,"wires":[[]]},{"id":"648f4862f830ba65","type":"ui_group","name":"Group 1","tab":"12dd3a4e3e2dc806","order":1,"disp":true,"width":12},{"id":"12dd3a4e3e2dc806","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

I installed the additional module with npm install ngx-json-viewer but the ui-template node is not showing any content. What I expect to see on this example is this:

Can anyone help with this?
Thanks!

[bakman2]

You could try an alternative (although the angular version appears to be a derivative of this one), in a ui-template node:

<style>json-viewer{padding:20px;}</style>
<script src="https://unpkg.com/@alenaksu/json-viewer@2.0.0/dist/json-viewer.bundle.js"></script>
<json-viewer>{{ msg.payload }}</json-viewer>

Dashboard example:

More info.

[blackhawk263]

Perfect, works like a charm. Thanks a lot!

[blackhawk263]

I have a follow up problem with this approach.
There is a refresh issue when the value changes.

I have the json objects that are sent to the viewer stored in a ui-table.
When I click on a specific row the values are sent to the json viewer.
It only works when I refresh the entire Dashboard page.

[{"id":"8dd8bc61e88d5baf","type":"tab","label":"ngx-json-viewer","disabled":false,"info":"","env":[]},{"id":"fdfefd17c0f73572","type":"function","z":"8dd8bc61e88d5baf","name":"Build Table Data","func":"var data1 = {\n    \"attr1\": \"value1\",\n    \"attr2\": \"value2\"\n}\nvar data2 = {\n    \"simple list\": [\n        \"value1\",\n        22222,\n        \"value3\"\n    ]\n}\nvar data3 = {\n    \"attr1\": \"value1\",\n    \"attr2\": \"value2\"\n}\nvar data4 = {\n    \"attr1\": \"value1\"\n}\nvar data5 = {\n    \"simple key\": \"simple value\",\n    \"numbers\": 1234567,\n    \"simple list\": [\n        \"value1\",\n        22222,\n        \"value3\"\n    ],\n    \"owner\": null,\n    \"simple obect\": {\n        \"simple key\": \"simple value\",\n        \"numbers\": 1234567,\n        \"simple list\": [\n            \"value1\",\n            22222,\n            \"value3\"\n        ],\n        \"simple obect\": {\n            \"key1\": \"value1\",\n            \"key2\": 22222,\n            \"key3\": \"value3\"\n        }\n    }\n}\n\n\nmsg.payload = [\n    {\n        \"data\" : JSON.stringify(data1)\n    },\n    {\n        \"data\": JSON.stringify(data2)\n    },\n    {\n        \"data\": JSON.stringify(data3)\n    },\n    {\n        \"data\": JSON.stringify(data4)\n    },\n    {\n        \"data\": JSON.stringify(data5)\n    }\n]\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":400,"y":340,"wires":[["0568bb5360e44817","999b673461b71c70"]]},{"id":"4f077dcfb4553f9f","type":"inject","z":"8dd8bc61e88d5baf","name":"Start Manual","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":340,"wires":[["fdfefd17c0f73572"]]},{"id":"0568bb5360e44817","type":"debug","z":"8dd8bc61e88d5baf","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":760,"y":260,"wires":[]},{"id":"eb01bfb4b0b89912","type":"ui_template","z":"8dd8bc61e88d5baf","group":"4f61a6486b3c7f27","name":"json-viewer","order":1,"width":8,"height":4,"format":"<style>\n    json-viewer {\n        padding: 20px;\n    }\n</style>\n<script src=\"https://unpkg.com/@alenaksu/json-viewer@2.0.0/dist/json-viewer.bundle.js\"></script>\n<json-viewer>{{ msg.payload.data }}</json-viewer>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":790,"y":300,"wires":[[]]},{"id":"999b673461b71c70","type":"ui_table","z":"8dd8bc61e88d5baf","group":"648f4862f830ba65","name":"","order":1,"width":16,"height":8,"columns":[],"outputs":1,"cts":true,"x":590,"y":340,"wires":[["eb01bfb4b0b89912","0568bb5360e44817","aa7a6e1e6e409970"]]},{"id":"aa7a6e1e6e409970","type":"ui_text","z":"8dd8bc61e88d5baf","group":"4f61a6486b3c7f27","order":2,"width":8,"height":4,"name":"Pure JSON","label":"","format":"{{msg.payload.data}}","layout":"row-left","className":"","x":790,"y":340,"wires":[]},{"id":"4f61a6486b3c7f27","type":"ui_group","name":"Group 2","tab":"12dd3a4e3e2dc806","order":2,"disp":true,"width":8},{"id":"648f4862f830ba65","type":"ui_group","name":"Group 1","tab":"12dd3a4e3e2dc806","order":1,"disp":true,"width":16},{"id":"12dd3a4e3e2dc806","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]