JavaScript/jQuery Lookup - JSON Data
Load JSON data by assigning its URL to the dataSource property.
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
],
// ...
})Vue
<template>
<DxLookup
data-source="https://jsonplaceholder.typicode.com/users"
value-expr="username"
display-expr="name"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxLookup } from 'devextreme-vue/lookup';
export default {
components: {
DxLookup
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Lookup } from 'devextreme-react/lookup';
class App extends React.Component {
render() {
return (
<Lookup
dataSource="https://jsonplaceholder.typicode.com/users"
valueExpr="username"
displayExpr="name"
/>
);
}
}
export default App;Note that you can also use a JSONP callback parameter.
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
],
// ...
})Vue
<template>
<DxLookup ...
data-source="http://www.example.com/dataservices/jsonpdata?callback=?"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxLookup } from 'devextreme-vue/lookup';
export default {
components: {
DxLookup
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Lookup } from 'devextreme-react/lookup';
class App extends React.Component {
render() {
return (
<Lookup ...
dataSource="http://www.example.com/dataservices/jsonpdata?callback=?"
/>
);
}
}
export default App;Implement the CustomStore if you need to process data after obtaining it. See the Custom Sources topic for more details.
See Also
Select one or more answers