Populating JsTree with JSON variable

Question

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?

Answer 1

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.