DevExtreme Angular - JSON Data

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

jQuery
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"
                })
            )
        }
    });
});
Angular
HTML
TypeScript
<dx-list
    dataSource="https://jsonplaceholder.typicode.com/posts">
    <div *dxTemplate="let data of 'item'">
        <i>{{data.id}}</i> | <b>{{data.title}}</b><br/>
        <p style="margin-top:10px; white-space='normal'">{{data.body}}</p> 
    </div>
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

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

jQuery
JavaScript
$(function() {
    $("#listContainer").dxList({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?",
        // ...
    });
});
Angular
HTML
TypeScript
<dx-list
    dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
</dx-list>
import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

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

See Also