FuelUX Tree: How do I set dataSource with json source?

Question

I'm trying to set a json data source for the FuelUX tree. I have created a php file that echos a json_encoded array and the result looks something like:

[{"name":"South Africa","type":"folder","additionalParameters":{"id":"1"}}]

Below is the javascript snippet:

jQuery(document).ready(function (e) {
    var DataSourceTree = function (options) {
        this.url = options.url;
    }

    DataSourceTree.prototype.data = function (options, callback) {
        var self = this;
        var $data = null;

        var param = null

        if (!("name" in options) && !("type" in options)) {
            param = 0; //load the first level  
        } else if ("type" in options && options.type == "folder") {
            if ("additionalParameters" in options && "children" in options.additionalParameters) {
                param = options.additionalParameters["id"];
            }
        }

        if (param != null) {
            $.ajax({
                url: this.url,
                data: 'id=' + param,
                type: 'POST',
                dataType: 'json',
                success: function (response) {
                    if (response.status == "OK")
                        callback({
                            data: response.data
                        })
                },
                error: function (response) {
                    console.log(response);
                }
            })
        }
    };

    $('#location-tree').tree({
        dataSource: new DataSourceTree({
            url: '/do_json/get_location_tree'
        }),
        multiSelect: false,
    });
});

Please help if you know what I am missing or doing wrong as currently nothing is being returned.

Answer 1

Your implementation is not reading the data as it should - if you want this to work you have to change a few things:

DataSourceTree.prototype.data = function (options, callback) {
    var self = this;
    var $data = null;

    var param = null

    if (!("name" in options) && !("type" in options)) {
        param = 0; //load the first level  
    } else if ("type" in options && options.type == "folder") {
        if ("additionalParameters" in options && "children" in options.additionalParameters) {
            param = options.additionalParameters["id"];
        }
    }

    if (param != null) {
        $.ajax({
            url: this.url,
            data: 'id=' + param,
            type: 'POST',
            dataType: 'json',
            success: function (response) {
                callback(response)
            },
            error: function (response) {
                console.log(response);
            }
        })
    }
};

See the changed success function of the ajax call.

This is because your current implementation awaits data in this format:

[{status: "OK", data: [{"name":"South Africa","type":"folder","additionalParameters":{"id":"1"}}] }]