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

**URL:** <https://discourse.nodered.org/t/how-to-use-ngx-json-viewer-on-ui-template-node/73911>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, external-package\
**Created:** [19 January 2023 13:02 UTC](https://discourse.nodered.org/t/how-to-use-ngx-json-viewer-on-ui-template-node/73911 "2023-01-19T13:02:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![blackhawk263](https://avatars.discourse-cdn.com/v4/letter/b/f475e1/32.png) [@blackhawk263](https://discourse.nodered.org/u/blackhawk263)\
**Post date:** [19 January 2023 13:02 UTC](https://discourse.nodered.org/t/how-to-use-ngx-json-viewer-on-ui-template-node/73911/1 "2023-01-19T13:02:10Z")

</div>

Hello

I'm looking for a way to display a json object as a collapsible element with the ui-template node.  
I found [this](https://www.npmjs.com/package/ngx-json-viewer) 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](https://stevesnoderedguide.com/using-dashboard-template-node) 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

```auto
[{"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:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/43aaf83136ba0c9755b30e2cbd63d2e6ac014f4c.png)

Can anyone help with this?  
Thanks!

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 January 2023 13:23 UTC](https://discourse.nodered.org/t/how-to-use-ngx-json-viewer-on-ui-template-node/73911/2 "2023-01-19T13:23:03Z")

</div>

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

```auto
<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:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/247c9fd73cb5de73d744f284b12b06356c6b0d18.png)

[More info](https://github.com/alenaksu/json-viewer).

---

<div class="post-metadata">

**Author:** ![blackhawk263](https://avatars.discourse-cdn.com/v4/letter/b/f475e1/32.png) [@blackhawk263](https://discourse.nodered.org/u/blackhawk263)\
**Post date:** [19 January 2023 13:57 UTC](https://discourse.nodered.org/t/how-to-use-ngx-json-viewer-on-ui-template-node/73911/3 "2023-01-19T13:57:21Z")

</div>

Perfect, works like a charm. Thanks a lot!

---

<div class="post-metadata">

**Author:** ![blackhawk263](https://avatars.discourse-cdn.com/v4/letter/b/f475e1/32.png) [@blackhawk263](https://discourse.nodered.org/u/blackhawk263)\
**Post date:** [20 January 2023 09:04 UTC](https://discourse.nodered.org/t/how-to-use-ngx-json-viewer-on-ui-template-node/73911/4 "2023-01-20T09:04:15Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 February 2023 09:04 UTC](https://discourse.nodered.org/t/how-to-use-ngx-json-viewer-on-ui-template-node/73911/5 "2023-02-03T09:04:20Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.