DevExtreme Angular - JSON Data

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

jQuery
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: "https://jsonplaceholder.typicode.com/users",
        valueExpr: 'username',
        displayExpr: 'name'
    });
});
Angular
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().

jQuery
JavaScript
$(function() {
    $("#selectBoxContainer").dxSelectBox({
        dataSource: "http://www.example.com/dataservices/jsonpdata?callback=?",
        // ...
    });
});
Angular
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