Question posted in
You can find the official documentation here.

Populating JsTree with JSON variable – Jquery ajax

I’ve been trying the whole day to get this thing working but somehow JsTree doesn’t want to render my JSON data.

Here is the example JSON object:

{"parent":null, "ProductOption":null, "data":"HlaHd", "text":"global", "DelegationScope":0, "children":null, "entityId":1}

I get the JSON object through an AJAX call on $(document).ready():

if ($('#ProductTree').length) {
            $.ajax({
                type: "Post",
                url: "/blah/blah",
                dataType: "json",
                data: { id : blah },
                success: function (json) {
                    createJsTree(json);
                }
            });
        }

And here is how I’m creating the tree:

function createJsTree(json) {
        $('#ProductTree').jstree({
            'core': {
                'themes': {
                    'name': 'proton',
                    'responsive': true
                },
                'check_callback': true,
                'data': json
            }
        });
    }

At first I thought maybe my JSON object is faulty, so I printed the object on the chrome’s console right before creating the JsTree:

    function createJsTree(json) {
        console.log(json);
        $('#ProductTree').jstree({
            'core': {
                'themes': {
                    'name': 'proton',
                    'responsive': true
                },
                'check_callback': true,
                'data': json
            }
        });
    }

And the JSON object is exactly as I stated above. Now the funny thing is, if I just paste the literal JSON object as the data in JsTree creation like the following:

    function createJsTree(json) {
        $('#ProductTree').jstree({
            'core': {
                'themes': {
                    'name': 'proton',
                    'responsive': true
                },
                'check_callback': true,
                'data': { "parent": null, "ProductOption": null, "data": "HlaHd", "text": "global", "DelegationScope": 0, "children": null, "entityId": 1 }
            }
        });
    }

Then the tree gets rendered. What on earth is going on here?

Tags:

2

Answers


  1. 0

    It looks like you are trying to pass a string representing a json object instead of the object itself. It should work if you write data: JSON.parse(json) replacing data: json.

    Login or Signup to reply.
  2. 0

    You need to parse responded JSON string to json format using JSON.parse().
    Hope this will help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search