Data model as a json data source for react

JavaScript
1

Hello,

Is it possible to return the back-end model for react as a JSON file or simple array for the data source?
For example by a function with Axios and fetch?

Is this correct:

import React from 'react';


const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];

export default class DevGrid1 extends React.Component {

    
    componentDidMount() {
        this.GetAllData();
    }
    render() {
        return (
            <DataGrid
                dataSource={GetAllData()}
                defaultColumns={columns}
                showBorders={true}
            />
        );
    }
    GetAllData() {
        axios.get('image')
             .then(response => {
                console.log(response.data)
                const { data } = response.data
                 SetUserData(data)
             }).catch(error => {
                 console.log(error);
             })
    }


    
}

thanks,

2

Hi,

If you get your data from other API, look at the docs, what its return.

I don’t know what package you used in the code and maybe you not giving a complete code, but i looks ok.

One feedback is you can give GetAllData() camelCase -> getAllData()

3

No, this code is not from any package. I wrote it myself to test it.

4

So you server is running and then you know what data you give back when the client asked to fetch something right?

Also you missed couple of things like
import axios, import DataGrid, and I don’t know what SetUserData is.

Perhaps you need to store your data in some state and then passed it to DataGrid? I’m sorry I don’t really understand your code.

I think like:

this.state = {
  data: null
}

...
.then(response => this.setState({ data: response.data })

// and then you return it to DataGrid
<DataGrid datasource={this.state.data} ... />
5

Do you think this code works for returning json data from model:

componentDidMount() {
    axios.get("https://api.example.com/items")
      .then(res => {
        const items = res.data;
        this.setState(items);
      })
  }
6

If you have state items than this.setState({items})
but make sure you have the data by console.log it first.

7

In this case why we need states. You mean save the model data in state?

8

Yes,

If you want to use the data from an API, then you need to save it in React class state.
From there you can use it inside your class or just passed it down to another component down the tree.

9

I wrote this code but it doesn’t work:

import React from 'react';


import { FetchData } from './FetchData';

const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];

export default class DevGrid1 extends React.Component {

    constructor(props) {
        super(props);
        this.state = { myJson: [], loading: true };
    }

    componentDidMount() {
        this.jsonImageData()
    }
   

    static renderImageDataTable(myJson) {
        return (
            <DataGrid
                dataSource={myJson}
                defaultColumns={columns}
                showBorders={true}
            />
            )
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : FetchData.renderImageDataTable(this.state.myJson);

        return (
            <div>

                {contents}

            </div>
        );
    }

    async jsonImageData() {
        const response = await fetch('ImageData');
        const data = await response.json();
        this.setState({ myJson: data, loading: false });
    }
    
 

    
}

Can you please guide me where is wrong?

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.