DevExtreme Angular - JSON Data

Load JSON data by assigning its URL to the dataSource option.

HTML
TypeScript
  • <dx-select-box
  • dataSource="https://jsonplaceholder.typicode.com/users"
  • valueExpr="username"
  • displayExpr="name">
  • </dx-select-box>
  • import { DxSelectBoxModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSelectBoxModule
  • ],
  • // ...
  • })

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

HTML
TypeScript
  • <dx-select-box ...
  • dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
  • </dx-select-box>
  • import { DxSelectBoxModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSelectBoxModule
  • ],
  • // ...
  • })

Implement the CustomStore if you need to process data after obtaining it. See the Custom Sources topic for more details.

See Also