React 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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.