Populating a JSTree with JSON data obtained in AJAX

Question

I'm trying to populate a JSTree with JSON data that I'm obtaining from a service (which is called using ajax). However, I am getting a "Neither data nor ajax settings supplied error" in the jquery.jstree.js file. Because of this the JSTree just displays a loading gif.

AJAX code (editted to try setting json to local variable test, then return test)

function getJSONData() {
    var test;
    $
            .ajax({
                async : true,
                type : "GET",
                url : "/JavaTestService/rs/TestService/MyFirstTestService?languageCode=en_US&version=2",
                dataType : "json",

                success : function(json) {
                    test = json;
                },

                error : function(xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    alert(thrownError);
                    test = "error";
                }
            });
    return test;
}

JSTree code

var jsonData = getJSONData();
createJSTrees(jsonData);

function createJSTrees(jsonData) {
        $("#supplierResults").jstree({
            "json_data" : {
                "data" : jsonData
            },
            "plugins" : [ "themes", "json_data", "ui" ]
        });

After some debugging, I've found that jsonData is undefined when passed to the createJSTrees method. Am I retrieving that data correctly in the Ajax code? Thanks in advance

You need to put async back to "false" for this local variable approach to work. — Adam, Jun 04 '13 at 18:14

score 8 · Answer 1 · answered Jun 04 '13 at 16:54

8

jsonData is undefined because getJSONData() doesn't return a value. You can't rely on the return value from your $.ajax success handler unless you assign a variable local to getJSONData() that gets returned after the $.ajax call completes. But you want something like this, which also has the benefit of being asynchronous:

<script type="text/javascript">    

$(function() {
    $.ajax({
        async : true,
        type : "GET",
        url : "/JavaTestService/rs/TestService/MyFirstTestService?languageCode=en_US&version=2",
        dataType : "json",    

        success : function(json) {
            createJSTrees(json);
        },    

        error : function(xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});    

function createJSTrees(jsonData) {
    $("#supplierResults").jstree({
        "json_data" : {
            "data" : jsonData
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });
}    

</script>

answered Jun 04 '13 at 16:54

Adam

741
6
4

I've implemented the above approach, but my JSTree is completely empty(not even a loading gif). I don't get any console errors either, so I would guess that the json data might be empty? That shouldn't be the case though, as I've tested the service. – Hunter Hodnett Jun 04 '13 at 17:33
2

I'm not familiar with jsTree, but the above code will ensure createJSTrees(jsonData) is called with the JSON response from your service. What does jsonData look like when that function is executed? – Adam Jun 04 '13 at 17:41
After adding a local variable to getJSONData(), jsonData is still undefined. The editted AJAX code is in my main post. The variable test is undefined after the AJAX call as well. – Hunter Hodnett Jun 04 '13 at 18:01
The local variable approach is for the async:false method (you just set async:true in your edited post). You need to use my code as-is for the async:true method. – Adam Jun 04 '13 at 18:08
Gotcha, thanks. This seems to work, but now I just have to modify my service to return json data that is formatted according to the jstree documentation. – Hunter Hodnett Jun 04 '13 at 18:47

vincentks · Accepted Answer · 2013-06-04T17:20:02.290

2

I have not tested your approach before, where you supply the data parameter directly to the json_data plugin, so I won't be able to supply an answer to this scenario.

However, since you are using an AJAX call to get the data, can't you supply the AJAX call to JSTree and let it handle the call on its own? Here's how I've configured the AJAX call in my code:

        (...)
        'json_data': {
            'ajax': {
                'url': myURL,
                'type': 'GET',
                'data': function(node) {
                    return {
                        'nodeId': node.attr ? node.attr("id") : ''
                    };
                }
            },
            'progressive_render': true,
            'progressive_unload': false
        },
        (...)

edited Jun 04 '13 at 17:20

answered Jun 04 '13 at 16:37

vincentks

694
6
14

1

When I attempt this approach, I get the following error: POST http://localhost:8081/JavaTestService/rs/TestService/MyFirstTestService?languageCode=en_US&version=2 405 (Method Not Allowed). Any ideas on why this may be? – Hunter Hodnett Jun 04 '13 at 17:15
1

Can you change the type parameter in the code above from 'POST' to 'GET'? That should do the trick. I've updated the code accordingly. – vincentks Jun 04 '13 at 17:19
1

I figured that might have been it. No console errors now, but my JSTree is completely empty. It's the same case when I try the approach described by Adam below. Somehow I'm just not getting the right data. If you know the above code is solid, I'll just keep looking elsewhere in my application for why this may be. – Hunter Hodnett Jun 04 '13 at 17:29
1

When you execute your function getJSONData on its own, do you get the expected results on method success(json)? Can you please add here the result you get back? Maybe the objects returned do not match JSTree's object structure (defined at http://www.jstree.com/documentation/json_data) – vincentks Jun 04 '13 at 17:33
1

With the current edits made to the AJAX code in my above post, jsonData is still undefined. However, I have found that the json data I am getting from my service is not in line with the jstree object structure. I will fix my service and try the above method again. Thanks for your help. – Hunter Hodnett Jun 04 '13 at 18:02
1

hello friends, i have the same problem. I am not able to figure how to pull in nodes thru AJAX? the JSON I am returning from server is: {"1":"2016","6":"winter","2":"2015","4":"2013","8":"vacation","5":"summer","3":"2014","7":"birthday"} but i do not know how to draw a tree using this?... I intend to retrieve the sub-nodes for each 'node' thru AJAX call, and load data only when a 'node' is clicked. How can i do that? see this pl: http://stackoverflow.com/questions/39188372/jstree-unable-to-load-root-nodes-from-ajax-call – rajeev Aug 28 '16 at 23:59

Populating a JSTree with JSON data obtained in AJAX

2 Answers2