DevExtreme React - JSON Data

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

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • 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 supported by jQuery.ajax().

  • import React from 'react';
  • import 'devextreme/dist/css/dx.common.css';
  • 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