How to generate a jstree using AJAX?

I have been having problems generating a JsTree using data from my server. I have tried different formats and appending an existing tree, no dice. The only thing that happens is that it the jstree div gets replaced by

<div id="jstree" class="jstree jstree-1 jstree-default jstree-leaf" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="j1_loading" aria-busy="false"><ul class="jstree-container-ul jstree-children" role="group"></ul></div>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
<body>
  <div id="jstree">

  </div>

  <script>
  $(function() {
    $.ajax({
        async : true,
        type : "GET",
        url : "/treeTest2",
        dataType : "json",    

        success : function(json) {
            // alert(JSON.stringify((json)));
            createJSTrees(json);
        },    

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

function createJSTrees(jsonData) {
    $("#jstree").jstree({
        "json_data" : {
            "data" : jsonData
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    }).bind("select_node.jstree", function (e, data) {  
    alert(e);
    });
}
</script>
</body>
</html>

Heres what the alert(JSON.stringify((json))); returns

[
    {
        "a_attr": {
            "id": 1
        },
        "text": "lvl1",
        "icon": "snipplet",
        "metadata": null,
        "children": [
            {
                "a_attr": {
                    "id": 3
                },
                "text": "lvl2",
                "icon": "snipplet",
                "metadata": null,
                "children": [
                    {
                        "a_attr": {
                            "id": 5
                        },
                        "text": "lvl3",
                        "icon": "snipplet",
                        "metadata": null,
                        "children": []
                    }
                ]
            },
            {
                "a_attr": {
                    "id": 4
                },
                "text": "lvl2",
                "icon": "snipplet",
                "metadata": null,
                "children": []
            }
        ]
    },
    {
        "a_attr": {
            "id": 2
        },
        "text": "lvl1",
        "icon": "snipplet",
        "metadata": null,
        "children": []
    }
]

The metadata tag is needed for data that will be needed later. Everything will be otganised into folders and snipplets. And the id tag will be used in hyperlinks.

Answer

Here’s the solution.

function createJSTrees(jsonData) {
    $("#kautkas").jstree({  
        'core' : {  
            'data' : jsonData  
        }   
    });  
}