In this article I will explain with an example, how to populate jsTree using API in HTML.
 
 
The API URL
The following JSON will be used in this article.
https://raw.githubusercontent.com/aspsnippets/test/master/Vehicles.json
[
 {
    "id": "1",
    "parent": "#",
    "text": "Cars"
 },
 {
    "id": "2",
    "parent": "#",
    "text": "Bikes"
 },
 {
    "id": "1-1",
    "parent": "1",
    "text": "Alto"
 },
 {
    "id": "1-2",
    "parent": "1",
    "text": "WagonR"
 },
 {
    "id": "1-3",
    "parent": "1",
    "text": "Scorpio"
 },
 {
    "id": "1-4",
    "parent": "1",
    "text": "Duster"
 },
 {
    "id": "2-5",
    "parent": "2",
    "text": "Discover"
 },
 {
    "id": "2-6",
    "parent": "2",
    "text": "Avenger"
 },
 {
    "id": "2-7",
    "parent": "2",
    "text": "Unicorn"
 },
 {
    "id": "2-8",
    "parent": "2",
    "text": "Karizma"
 }
]
 
 
HTML Markup
The following HTML Markup consists of:
DIV – For generating the jQuery TreeView.
HiddenField – For storing selected items.
Button – For displaying selected items.
<div id="jstree"></div>
<input type="hidden" id="selectedItems" />
<input type="button" value="Submit" id="btnSubmit" />
 
 
jQuery TreeView implementation
Inside the jQuery document ready event handler, the API URL is called using the jQuery get function.
Inside the jQuery get Success event handler, the jQuery jsTree plugin is applied to the HTML DIV and the JSON string returned form the API is converted to Array using the JSON.parse function and assigned to the source of data property.
Inside the changed event handler of the jQuery jsTree plugin, an array of JSON objects is generated and is serialized and saved in the Hidden Field.
The Button has been assigned with a jQuery click event handler.
Inside this event handler, the selected item of jsTree will be displayed using JavaScript Alert Message Box.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.get("https://raw.githubusercontent.com/aspsnippets/test/master/Vehicles.json",
            function (data, status) {
                $('#jstree').on('changed.jstree', function (e, data) {
                    var i, j;
                    var selectedItems = [];
                    for (i = 0, j = data.selected.length; i < j; i++) {
                        //Fetch the Id.
                        var id = data.selected[i];
 
                        //Remove the ParentId.
                        if (id.indexOf('-') != -1) {
                            id = id.split("-")[1];
                        }
 
                        //Add the Node to the JSON Array.
                        selectedItems.push({
                            text: data.instance.get_node(data.selected[i]).text,
                            id: id,
                            parent: data.selected[i].split("-")[0]
                        });                   
                    }
 
                    //Serialize the JSON Array and save in HiddenField.
                    $('#selectedItems').val(JSON.stringify(selectedItems));
 
                }).jstree({
                    "core": {
                        "themes": { "variant": "large" },
                        "data": JSON.parse(data)
                    },
                    "checkbox": { "keep_selected_style": false },
                    "plugins": ["wholerow", "checkbox"]
                });
            });
    });
 
    $("#btnSubmit").click(function () {
        alert($('#selectedItems').val());
    });
</script>
 
 
Screenshot
Populate JSTree using API
 
 
Demo
View Demo
 
 
Downloads
Download Code