# Tree browser for JSON?

**URL:** <https://discourse.nodered.org/t/tree-browser-for-json/56425>\
**Category:** Dashboard\
**Created:** [10 January 2022 21:29 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425 "2022-01-10T21:29:47Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hobbes1069](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hobbes1069/32/39892_2.png) [@hobbes1069](https://discourse.nodered.org/u/hobbes1069)\
**Post date:** [10 January 2022 21:29 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/1 "2022-01-10T21:29:48Z")

</div>

I searched the best I could but didn't find anything.

Is there a dashboard node that can take a JSON payload and create a tree browser? You know, with the + and - buttons to expand and collapse. Ideally it could "do something" when a particular attribute is selected either with additional buttons (Add/Remove) or drag and drop.

Basically I'm connecting to a MTConnect capable CNC and it provides a TON of attributes. I would like something better than using a text editor that can pretty the output to make it human readable and instead have a tree browser.

---

<div class="post-metadata">

**Author:** ![ghayne](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ghayne/32/39_2.png) [@ghayne](https://discourse.nodered.org/u/ghayne)\
**Post date:** [10 January 2022 22:00 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/2 "2022-01-10T22:00:36Z")

</div>

What happens if you put it through a JSON node connected to a debug node?  
How are you getting the data?

---

<div class="post-metadata">

**Author:** ![hobbes1069](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hobbes1069/32/39892_2.png) [@hobbes1069](https://discourse.nodered.org/u/hobbes1069)\
**Post date:** [10 January 2022 23:38 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/3 "2022-01-10T23:38:28Z")

</div>

It's an HTTP request. I've already played around with it using debug nodes, but funnily enough, it's so long that it's truncated if I try to copy and paste out of the debug window.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 January 2022 23:44 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/4 "2022-01-10T23:44:13Z")

</div>

Set the debug to output to console then you'll get the full message in the node-red log/console output.

Alternatively, send it to a file node and save to disk. Then you can use a proper editor.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [11 January 2022 00:07 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/5 "2022-01-11T00:07:29Z")

</div>

I don’t know how your data looks like but if it is somehow structured to fit into a table you could perhaps use ui-table.  
You can even use a tree view as long as you can sort your data into columns

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/7/f760095b856d764ac2634cba8b2d0620161b7015.png)

Warning: This is not an easy task.

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [11 January 2022 06:24 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/6 "2022-01-11T06:24:05Z")

</div>

The best example of an interactive JSON structure "tree" I can think of is the `msg` object view in the debug sidebar. Nick and the team have spent lots of hours getting that to be functional and very intuitive -- so how much effort would it take to wrap that into a stand-alone `ui-debug` or `ui-tree` node?

---

<div class="post-metadata">

**Author:** ![hobbes1069](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hobbes1069/32/39892_2.png) [@hobbes1069](https://discourse.nodered.org/u/hobbes1069)\
**Post date:** [12 January 2022 17:14 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/7 "2022-01-12T17:14:30Z")

</div>

I wish I had the expertise to do it myself but I don't. I think this could be really cool to be able to browse (expand/collapse) and select objects with the tree and expose the ability to do something with the selected data.

Basically very similar to the way you can browse MQTT topics in MQTT Explorer.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [12 January 2022 17:49 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/8 "2022-01-12T17:49:51Z")

</div>

Perhaps send me some sample data and I can take a look at it and see what I can do to help

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [12 January 2022 19:58 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/9 "2022-01-12T19:58:54Z")

</div>

Might be possible to use [https://www.jstree.com/](https://www.jstree.com/)

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [13 January 2022 08:28 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/10 "2022-01-13T08:28:41Z")

</div>

Just for the records.  
To use ui-table as a tree view the data has to be reformatted. All child rows are an array in `_children` as [described here](http://tabulator.info/docs/4.3/tree#structure)  
You have to configure the table via `msg.ui_control`

```auto
{
    "tabulator": {
        "dataTree": true,
        "autoColumns": false,
        "columns": [
 
        ]
    }
}

```

It is important to set `autoColumns`to false otherwise the `_children` column will be displayed. Then you have to configure the columns you like to see in the columns array. (perhaps you can use the ui-table config but I haven't tested it. Ui-table sets by default `autoColumns`to `true.)

The basic flow should look like this then  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/55c27d9790809a1fc668ef60a872fee1be699b60.png)

---

<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:** [12 February 2022 08:28 UTC](https://discourse.nodered.org/t/tree-browser-for-json/56425/11 "2022-02-12T08:28:56Z")

</div>

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