DevExtreme React - 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
    ],
    // ...
})
Vue
<template>
    <DxLookup
        data-source="https://jsonplaceholder.typicode.com/users"
        value-expr="username"
        display-expr="name"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
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.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().

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.common.css';
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.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