# Display Text (JSON) on the Dashboard

**URL:** https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587
**Category:** Dashboard
**Created:** [3 November 2023 17:29 UTC](https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587 "2023-11-03T17:29:17Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![joerg\_w](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joerg_w/32/34414_2.png) [@joerg\_w](https://discourse.nodered.org/u/joerg_w)
#### Post date: [3 November 2023 17:29 UTC](https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587/1 "2023-11-03T17:29:17Z")

</div>

Hi,  
I have a MQTT Input and I get several message types and I want to display them using a dashboard node (template widget)  
That works for simple text objects quite fine but how can I display more complex JSON objects ?  
Is there a way to 'pretty print' the JSON objects ?  
Thank you.  
Joerg

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [3 November 2023 17:30 UTC](https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587/2 "2023-11-03T17:30:29Z")

</div>

Yes, pass the object through a JSON node and select fomat option

[edit] Set the mqtt node to output a parse js object first if it outputs a string JSON, or use two JSON nodes and have the last one format the JSON.

---

<div class="post-metadata">

### Author: ![joerg\_w](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joerg_w/32/34414_2.png) [@joerg\_w](https://discourse.nodered.org/u/joerg_w)
#### Post date: [3 November 2023 17:48 UTC](https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587/3 "2023-11-03T17:48:36Z")

</div>

Thanks - did this already - the template node displays [Object object] on the dashboard.  
J.

---

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [3 November 2023 17:51 UTC](https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587/4 "2023-11-03T17:51:11Z")

</div>

![Screenshot 2023-11-03 at 17.50.34](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/b/6bf975d3fb23fa21ef7b909c27aed0baf25683b1.png)

Are you using this option? - as well as the format checkbox?

and use `{{{payload}}}` in the template node (3 brackets each side)

---

<div class="post-metadata">

### Author: ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)
#### Post date: [3 November 2023 18:01 UTC](https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587/5 "2023-11-03T18:01:43Z")

</div>

You would also need to add `<pre>JSON</pre>` html tags , as html will remove additional white space, when displayed in browser.  
e.g.

```auto
[{"id":"b248cc407c9cd936","type":"inject","z":"b779de97.b1b46","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"json_format","payload":"{\"one\":1,\"two\":2}","payloadType":"json","x":240,"y":3360,"wires":[["ef969c34d55367c5"]]},{"id":"ef969c34d55367c5","type":"mqtt out","z":"b779de97.b1b46","name":"","topic":"","qos":"","retain":"","respTopic":"","contentType":"","userProps":"","correl":"","expiry":"","broker":"e8ba3ef5.22f4a8","x":470,"y":3360,"wires":[]},{"id":"94a869aa8940d442","type":"mqtt in","z":"b779de97.b1b46","name":"","topic":"json_format","qos":"2","datatype":"auto-detect","broker":"e8ba3ef5.22f4a8","nl":false,"rap":true,"rh":0,"inputs":0,"x":110,"y":3420,"wires":[["5aa3a972933bac51","d345c7e092c712f0"]]},{"id":"5aa3a972933bac51","type":"json","z":"b779de97.b1b46","name":"","property":"payload","action":"","pretty":true,"x":290,"y":3420,"wires":[["1a27822f47b98d37"]]},{"id":"1a27822f47b98d37","type":"ui_template","z":"b779de97.b1b46","group":"4f791fdc1745d3d9","name":"","order":2,"width":0,"height":0,"format":"<div ng-bind-html=\"'<pre>' + msg.payload\" + '</pre>'></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":460,"y":3420,"wires":[[]]},{"id":"d345c7e092c712f0","type":"debug","z":"b779de97.b1b46","name":"debug 2453","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":330,"y":3460,"wires":[]},{"id":"e8ba3ef5.22f4a8","type":"mqtt-broker","name":"testb","broker":"192.168.1.25","port":"1883","clientid":"","autoConnect":true,"usetls":false,"compatmode":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthRetain":"false","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"userProps":"","sessionExpiry":""},{"id":"4f791fdc1745d3d9","type":"ui_group","name":"micro","tab":"c954274bbed7292e","order":1,"disp":false,"width":"18","collapse":false,"className":""},{"id":"c954274bbed7292e","type":"ui_tab","name":"Solar","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![joerg\_w](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joerg_w/32/34414_2.png) [@joerg\_w](https://discourse.nodered.org/u/joerg_w)
#### Post date: [3 November 2023 18:11 UTC](https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587/6 "2023-11-03T18:11:20Z")

</div>

Great - works now !!!  
Thank you @E1cid @marcus-j-davies

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [3 November 2023 19:44 UTC](https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587/7 "2023-11-03T19:44:31Z")

</div>

If you want a prettier print, take a look at this:

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/src/front-end-module/uibuilder.module.js#L288-L315>

Together with this:

> <https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/main/front-end/uib-brand.css#L873-L891>

It is the highlighter that I use inside uibuilder.

---

<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 December 2023 19:45 UTC](https://discourse.nodered.org/t/display-text-json-on-the-dashboard/82587/8 "2023-12-03T19:45:19Z")

</div>

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