How to pass data to bootstrap-treeview?

Question

I am using bootstrap-treeview to build my tree view.

I need to pass an array of JavaScript objects as data, to bootstrap-treeview.

I have defied a tree structure on the server side to build the tree and serialize it into a Json string. I then pass the Json string to client via an AJAX call:

// Tree object
public class MyTree
{
    public string text { get; set; }
    public List<MyTree> nodes { get; set; }
}

// I build the tree, and serialize it like this to be returned to JavaScript like this:
return JsonConvert.SerializeObject(treeObject);

This is my JavaScript code for building the tree. I want to pass the tree as data to bootstrap-treeview:

function getTree() {
    $.getJSON("/api/GetTree", function (tree) {
        return tree;

        // I have tried this as well but did not work:
        // var res = JSON.parse(tree);
        // return res;
    });
}

$('#MyTree').treeview({
    data: getTree(),
    enableLinks: true,
    showBorder: false
});

And this is the Screenshot from the value that I receive from the server in the AJAX call:

Chrome debugger screenshot

As seen above, I also tried passing: JSON.parse(tree); but it did not display the data either.

Answer 1

Edit and try with this :

function getTree() {
    $.getJSON("/api/GetTree", function (tree) {
      $('#MyTree').treeview({
        data: tree,
        enableLinks: true,
        showBorder: false
      });
        // I have tried this as well but did not work:
        // var res = JSON.parse(tree);
        // return res;
    });
}

getTree();