5

i have JSON like this

i want to use this JSON and display data in Table using react js.

this is how i display data from JSON file.

import React, { Component } from 'react';
import data from './data.json';

class App extends Component {
  render() {
    return (
        <ul>
        {
          data.map(function(movie){
            return <li>{movie.id} - {movie.title}</li>;
          })
        }
        </ul>
    );
  }
}

export default App;

how to load JSON from URL and display it in table using reactjs?

Improve this question

3 Answers 3

Reset to default
7

You could fetch the JSON once the component will mount, and when you eventually resolve it you can update the state of the component:

import React, { Component } from 'react';


class App extends Component {
  // initially data is empty in state
  state = { data: [] };

  componentDidMount() {
    // when component mounted, start a GET request
    // to specified URL
    fetch(URL_TO_FETCH)
      // when we get a response map the body to json
      .then(response => response.json())
      // and update the state data to said json
      .then(data => this.setState({ data }));
  }


  render() {
    return (
        <ul>
        {
          this.state.data.map(function(movie){
            return <li key={movie.id}>{movie.id} - {movie.title}</li>;
          })
        }
        </ul>
    );
  }
}

export default App;

If you're unable to use fetch, you could use some other libraries like superagent or axios. Or you could even fall back to good ol' XMLHttpRequest.

On another note, when building a list of component it is important they each child have a unique key attribute. I also updated that in the code, with the assumption that movie.id is

Example axios code:

axios.get(URL)
  .then(response => response.data)
  .then(data => this.setState({ data }));

EDIT: as trixn wrote in a reply, componentDidMount is the preferred place to fetch data. Updated code.

EDIT 2: Added axios code.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

This is correct but componentDidMount()is the preferred lifecycle method to fetch data. componentWillMount() will be prefixed with UNSAFE_ beginning with react 16.3 and will likely be removed in future react versions. See reactjs.org/docs/react-component.html#unsafe_componentwillmount.
I also wrote some nice alternatives. Libraries like superagent and axios makes it easier and more ergonomic to work with asynchronous HTTP requests, you could also use XMLHttpRequest.
should i install fetch first in my react app ? @Phillip
please tell me @Phillip
@Ahmad I've added some example code, but I don't know if I'm doing you a disservice writing the code for you. You should learn to look through library documentation and API. I suggest you look at the axios documentation so you have an idea of what is going on :)
|
2

You can use axios to send http requests.

It looks like this : 

const response = await axios.get(your_url_here);
const items = response.data.items;

About await keyword : How to use await key word on react native?

This is axios GitHub page for the docs : https://github.com/axios/axios

Hope it helps.

Improve this answer

3 Comments

can you please write full code for me as i am new to react and i don't know where to write these 2 lines in your answer
I use Redux Store to store my objects, so copy/paste my code won't help you anyway. You can call a function, by example on a button onPress event, and add these lines inside this function. (Don't forget async before function keyword). Get your hands dirty, it's the better way to learn.
Please add sample code @WaLinke as i am new to react and i am unable to display data since 4 days...i will be great full if you help me...
1

You can use the fixed Data table to display the data from the json Response.Since the data is vast and it would be difficult to manage the conventional table, this would be a better alternative.

The documentation is given at

https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ObjectDataExample.js

This link will help you.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.