Ajax callback function to populate hierarchy data in bootstrap treeview

Question

I am using bootstrap treeview to populate hierarchy member data. https://github.com/jonmiles/bootstrap-treeview

The sample of json data to populate the treeview:

var json = '[' +
                '{' +
                    '"text": "Parent 1",' +
                    '"nodes": [' +
                        '{' +
                            '"text": "Child 1",' +
                            '"nodes": [' +
                                '{' +
                                    '"text": "Grandchild 1"' +
                                '},' +
                                '{' +
                                    '"text": "Grandchild 2"' +
                                '}' +
                            ']' +
                        '},' +
                        '{' +
                            '"text": "Child 2"' +
                        '}' +
                    ']' +
                '},' +
                '{' +
                    '"text": "Parent 2"' +
                '},' +
                '{' +
                    '"text": "Parent 3"' +
                '},' +
                '{' +
                    '"text": "Parent 4"' +
                '},' +
                '{' +
                    '"text": "Parent 5"' +
                '}' +
            ']';

I have a ajax function, which it will get the direct down-line by passing memberID.

function getTree2(mid) {
        $.ajax({
            type: "POST",
            url: "../DataServices/ws_member.asmx/GetDirectDownlineByMemberID",
            data: "{'memberID':'" + mid + "'}",
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                var str = '';
                var result = JSON.parse(response.d)
                for (var i = 0; i < result.length; i++) {
                    str += '"text": "' + result[i].Name + '",' +
                          '"nodes": [' +
                         '{';

                    str += getTree2(result[i].ID);

                    str += '}' +
                     ']';
                }
                str += '}' +
                   ']';

                return str;
            },
            dataType: "json"
        });   
    }

but the following line cannot return any string.

str += getTree2(result[i].ID);

How do i loop the function getTree2 in ajax callback to return string?

score 0 · Answer 1 · answered Oct 31 '16 at 07:19

As Ajax call will be processed in an async thread so if you want to take back the return string, you should pass a callback thru

function getTree2(mid, callback)

Then in line #23:

    return callback(str);

So to add the new string:

getTree2(result[i].ID, function(newStr) { 
    str += newStr;
});

score 0 · Answer 2 · edited Sep 15 '20 at 10:33

The right format that should pass to the treeview isn't what you get back from the Ajax call you should parse the json object like the following example:

let invalid = '{ "bank": "CityBank", "sum": "500" }, { "bank": "WPBank", "sum": "700" }';
let valid = JSON.parse("[" + invalid + "]");

Now you can pass the valid variable to the treeView without any problems.

It all about to add square brackets notation to JSON object

Ajax callback function to populate hierarchy data in bootstrap treeview

2 Answers2