Функция обратного вызова Ajax для заполнения данных иерархии в виде дерева начальной загрузки

Question

Я использую дерево начальной загрузки для заполнения данных члена иерархии. https://github.com/jonmiles/bootstrap-treeview

Образец данных JSON для заполнения дерева:

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"' +
                '}' +
            ']';

У меня есть функция ajax, которая будет получать прямую передачу, передавая 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"
        });   
    }

но следующая строка не может вернуть любую строку.

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

Как зациклить функцию getTree2 в обратном вызове ajax для возврата строки?

Answer 1

Поскольку вызов Ajax будет обрабатываться в асинхронном потоке, поэтому, если вы хотите вернуть возвращаемую строку, вы должны передать обратный вызов через

function getTree2(mid, callback)

Затем в строке № 23:

    return callback(str);

Итак, чтобы добавить новую строку:

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

Answer 2

Правильный формат, который должен передаваться в древовидное представление, - это не то, что вы получаете от вызова Ajax, вы должны проанализировать объект json, как в следующем примере:

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

Теперь вы можете без проблем передать действительную переменную в treeView.

Речь идет о добавлении квадратных скобок к объекту JSON