DevExtreme Angular - JSON Data

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

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().

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