DevExtreme Angular - JSON Data

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

jQuery
JavaScript
$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: "https://jsonplaceholder.typicode.com/users",
        valueExpr: 'username',
        displayExpr: 'name'
    });
});
Angular
HTML
TypeScript
<dx-lookup
    dataSource="https://jsonplaceholder.typicode.com/users"
    valueExpr="username"
    displayExpr="name">
</dx-lookup>
import { DxLookupModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})

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

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

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

See Also