JsTree json ajax

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  <title>Test jstree ajax</title>
  <link href="style.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.0/sweetalert.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.22.0/css/uikit.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.22.0/css/uikit.almost-flat.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.22.0/css/uikit.gradient.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />
</head>

<body>
  <div class="uk-container uk-grid">
    <div class="uk-width-1-1">
      <p>Something <strong>amazing</strong> with the web!
        <a class="uk-button uk-button-primary" id="showSweet">
          <i class="fa fa-spin fa-cog"></i> Sweet
        </a>
      </p>
    </div>
    <div class="uk-width-1-1">
      <a class="uk-button" id="ajaxData">
        <i class="fa fa-cog" id="showLoading"></i> Get data
      </a>
      <pre id="node" class="uk-panel uk-panel-box uk-panel-box-primary"></pre>
      <div id="jstree" class="uk-panel uk-panel-box"></div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.0/sweetalert.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.22.0/js/uikit.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
  <script src="script2.js"></script>
</body>

</html>

// Code goes here

$(document).ready(function(e) {
  $('#showSweet').click(function() {
    swal("OK", "", "success");
  });
  var jsonArr = [];
  
  $('#ajaxData').click(function() {
    $("#showLoading").addClass("fa-spin");
    $.ajax({
      url: "http://jsonplaceholder.typicode.com/users",
      method: "get"
    }).done(function(users) {
      jsonArr = [];
      $.each( users, function( index, user ) {
        var obj = {};
        obj.id = "user" + user.id;
        obj.text = user.name;
        obj.parent = "#";
        obj.data = user;
        jsonArr.push(obj);
      });
      $.ajax({
        url: "http://jsonplaceholder.typicode.com/posts",
        method: "get"
      }).done(function(posts) {
        $.each( posts, function( index, post ) {
          var obj = {};
          obj.id = "post" + post.id;
          obj.text = post.title;
          obj.parent = "user" + post.userId;
          obj.data = post;
          jsonArr.push(obj);
        });
        $("#showLoading").removeClass("fa-spin");
        console.log(jsonArr);
        $('#jstree')
        .on('changed.jstree', function (e, data) {
          var i, j, r = [];
          for(i = 0, j = data.selected.length; i < j; i++) {
            r.push(data.instance.get_node(data.selected[i]).text);
          }
          $('#node').html('Selected: ' + r.join(', '));
        })
        .jstree({ 
          'core' : {
            'data' : jsonArr
          }
        });
      });
    }).fail(function(jqXHR, textStatus) {
      $("#showLoading").removeClass("fa-spin");
      alert("Request failed: " + jqXHR.statusText);
    });
  });
});

/* Styles go here */

#node {
  max-height: 100px;
  overflow: auto;
}

Test [jstree](https://www.jstree.com/) ajax.

Json data from http://jsonplaceholder.typicode.com/

// Code goes here

$(document).ready(function(e) {
  $('#showSweet').click(function() {
    swal("OK", "", "success");
  });
  var jsonArr = [];
  $('#tree').jstree({
    'core' : {
      'data' : function (node, cb) {
        $.ajax({
            "url" : "//www.jstree.com/fiddle/?lazy",
            "data" : { "id" : node.id },
            "success": function(data) {
              console.log(data);
              cb(data);
            }
        });
      }
    }
  });
  
  $('#ajaxData').click(function() {
    //$("#showLoading").addClass("fa-spin");
    $('#jstree')
    .on('changed.jstree', function (e, data) {
      var i, j, r = [];
      for(i = 0, j = data.selected.length; i < j; i++) {
        r.push(data.instance.get_node(data.selected[i].text));
      }
      $('#node').html('Selected: ' + JSON.stringify(data.node.data, null, 4));
    })
    .jstree({
      'core' : {
        'multiple' : false,
        'data' : function (node, cb) {
          $.ajax({
              "url" : node.id === "#" ? 
                      "http://jsonplaceholder.typicode.com/users" :
                      node.id.indexOf("user") > -1 ? 
                      "http://jsonplaceholder.typicode.com/posts?userId=" + node.data.id :
                      "http://jsonplaceholder.typicode.com/comments?postId=" + node.data.id,
              
              "success": function(datas) {
                var jsonArr = [];
                if (node.id === "#") {
                  $.each( datas, function( index, user ) {
                    var obj = {};
                    obj.id = "user" + user.id;
                    obj.text = user.name;
                    obj.parent = "#";
                    obj.data = user;
                    obj.icon = "fa fa-user";
                    obj.children = true;
                    jsonArr.push(obj);
                  });
                } else if (node.id.indexOf("user") > -1) {
                  $.each( datas, function( index, post ) {
                    var obj = {};
                    obj.id = "post" + post.id;
                    obj.text = post.title;
                    obj.parent = "user" + post.userId;
                    obj.icon = "fa fa-file";
                    obj.data = post;
                    obj.children = true;
                    jsonArr.push(obj);
                  });
                } else {
                  $.each( datas, function( index, comment ) {
                    var obj = {};
                    obj.id = "comment" + comment.id;
                    obj.text = comment.name;
                    obj.parent = "post" + comment.postId;
                    obj.icon = "fa fa-comment";
                    obj.data = comment;
                    jsonArr.push(obj);
                  });
                }
                cb(jsonArr);
              }
          });
        }
      }
    });
  });
});