How to Convert JSON Object to JSTree Directly using JS Function

[mustafakadwa52]

Hello guys,
I have been working with some API and want to generate a preview of the json data received from an GET API call.

I got this plugin and was thinking how would it automatically generate an tree by just feeding the json data to it.

Since i had a multidimensional json response i couldn't find any positive way to do so.

[mustafakadwa52]

Solution

However i found just the way to do so.

Just followed the folowing syntax:
$('#using_json').jstree({ 'core' : { 'data' : [ 'Simple root node', { 'text' : 'Root node 2', 'state' : { 'opened' : true, 'selected' : true }, 'children' : [ { 'text' : 'Child 1' }, 'Child 2' ] } ] } });

Here i replaced the data element with my recursive function to generate the array of objects required for the 'data' element inside the jstree function

Recursive JS Function

    function jsonToJsTreeObject( json_data_object, final_array = new Array() )
    {
        Object.keys(json_data_object).forEach( function( data ) {
            // console.log("Key:" + data);
            if( Array.isArray(json_data_object[data]) || json_data_object[data] instanceof Object )
            {
                final_array.push( { text: `${data}`, children: jsonToJsTreeObject( json_data_object[data], new Array() ) } );
                // using state attribute 
                // final_array.push( { text: `${data}`, state : {  'opened' : false, 'selected' : false }, children: jsonToJsTreeObject( json_data_object[data], new Array() ) } );
            }
            else
            {
                final_array.push( { text: `${data}`, children: [{ text: `${json_data_object[data]}` }] } );
                // using state attribute
                // final_array.push( { text: `${data}`, state : {  'opened' : false, 'selected' : false }, children: [{ text: `${json_data_object[data]}` }] } );
            }
        });

        return final_array;
    }`

Final Solution

const myjsonObject = //some json data. It can have multidimensional values as well

$('#preview_data_jstree').jstree({ 'core' : {
                    'data' : jsonToJsTreeObject( myjsonObject )
                } });

[mustafakadwa52]

@vakata It would really be helpful if you can include similar function in the js tree library. It might be helpful for many folks.

[vakata]

You can set core.data to a function and transform the data as needed (all documented). As for data transformation - it is a simple function that depends heavily on the input - there is nothing more I can include.