JSON Data

To bind the List to data in a JSON format, assign the URL leading to data to the dataSource option.

JavaScript
$(function() {
    $("#listContainer").dxList({
        dataSource: "https://jsonplaceholder.typicode.com/posts",
        itemTemplate: function(data, _, element) {
            element.append(
                $("<i>").text(data.id + " | "),
                $("<b>").text(data.title), $("<br />"),
                $("<p>").text(data.body).css({
                    "margin-top": 10,
                    "white-space": "normal"
                })
            )
        }
    });
});

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

JavaScript
$(function() {
    $("#listContainer").dxList({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?",
        // ...
    });
});

If you need to process data after obtaining it, implement the CustomStore. For details, see the Custom Sources topic.

See Also