Tree browser for JSON?

Dashboard
1

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.

1 Like
2

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

3

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.

4

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.

5

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
image479Ă—509 19.6 KB

Warning: This is not an easy task.

1 Like
6

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?

1 Like
7

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.

8

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

9

Might be possible to use https://www.jstree.com/

1 Like
10

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
You have to configure the table via msg.ui_control

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

It is important to set autoColumnsto 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 autoColumnsto `true.)

The basic flow should look like this then
image

11

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