Display Text (JSON) on the Dashboard

joerg_w · 3 November 2023 17:29

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

E1cid · 3 November 2023 17:30

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.

joerg_w · 3 November 2023 17:48

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

marcus-j-davies · 3 November 2023 17:51

Screenshot 2023-11-03 at 17.50.34

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

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

E1cid · 3 November 2023 18:01

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

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

joerg_w · 3 November 2023 18:11

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

TotallyInformation · 3 November 2023 19:44

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

github.com

TotallyInformation/node-red-contrib-uibuilder/blob/main/src/front-end-module/uibuilder.module.js#L288-L315


      
          function syntaxHighlight(json) {
              if (json === undefined) {
                  json = '<span class="undefined">undefined</span>'
              } else {
                  try {
                      json = JSON.stringify(json, undefined, 4)
                      // json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') // eslint-disable-line newline-per-chained-call
                      json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, function (match) { // eslint-disable-line prefer-named-capture-group
                          let cls = 'number'
                          if ((/^"/).test(match)) {
                              if ((/:$/).test(match)) {
                                  cls = 'key'
                              } else {
                                  cls = 'string'
                              }
                          } else if ((/true|false/).test(match)) {
                              cls = 'boolean'
                          } else if ((/null/).test(match)) {
                              cls = 'null'
                          }

This file has been truncated. show original

Together with this:

github.com

TotallyInformation/node-red-contrib-uibuilder/blob/main/front-end/uib-brand.css#L873-L891


      
          .syntax-highlight {
              color:white;
              display:block;
              background-color:black;
              padding:5px 10px;
              font-family: Consolas, "ui-monospace", "Lucida Console", monospace;
              font-size: smaller;
              white-space: pre;
              width: 99%;
              height: 22em;
              overflow: auto;
              resize: both;
          }
          .syntax-highlight > .key {color:#ffbf35}
          .syntax-highlight > .string {color:#5dff39;}
          .syntax-highlight > .number {color:#70aeff;}
          .syntax-highlight > .boolean {color:#b993ff;}
          .syntax-highlight > .null {color:#93ffe4;}
          .syntax-highlight > .undefined {color:#ff93c9;}

It is the highlighter that I use inside uibuilder.

system · 3 December 2023 19:45

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

Topic		Replies	Views
JSON Message + Text Dashboard Dashboard	2	265	23 October 2022
Display MQTT data in Table Dashboard	2	920	6 October 2020
Advice on JSON format General	8	137	2 April 2023
Tree browser for JSON? Dashboard	10	1105	12 February 2022
Dynamically display multiple output text nodes General	6	2483	15 August 2020

Display Text (JSON) on the Dashboard

Related Topics