Fetch Data from json file in React.js

Question

I have a json file call data.json such as ( I use React.js):

[{"id": 1,"title": "Child Bride"}, 
{"id": 2, "title": "Last Time I Committed Suicide, The"}, 
{"id": 3, "title": "Jerry Seinfeld: 'I'm Telling You for the Last Time'"}, 
{"id": 4, "title": "Youth Without Youth"}, 
{"id": 5, "title": "Happy Here and Now"}, 
{"id": 6, "title": "Wedding in Blood (Noces rouges, Les)"}, 
{"id": 7, "title": "Vampire in Venice (Nosferatu a Venezia) (Nosferatu in Venice)"}, 
{"id": 8, "title": "Monty Python's The Meaning of Life"}, 
{"id": 9, "title": "Awakening, The"}, 
{"id": 10, "title": "Trip, The"}]

Im my componentDidMount I have the below:

      fetch('./data/data.json')
.then((response) => response.json())
.then((findresponse)=>{
  console.log(findresponse.title)
  this.setState({
    data:findresponse.title,
  })
})

}

and in my render:

 <ul>

         <li>        {this.state.title}</li>;


    </ul>

I would like to list all the title from my json file,

Otherwise it says that .then((response) => response.json()) is an anonymous function . . .

How to fix this ? I'm a bit confused

many thanks

Your response isn't an object with a title property, it's an array of objects, all of which have title properties. this.setState({ data: findresponse }); and then in your render {this.state.data.map(x => x.title).join(',')} — Jared Smith
– Jared Smith, Commented May 11, 2018 at 11:59
thank you, I have replace the above but it now i have this.state.data.map is not a function on {this.state.data.map(x => x.title).join(',')} ?? My json call from the public folder — tibewww
– tibewww, Commented May 11, 2018 at 12:02
Then you didn't post your actual code, or your fetch response isn't the same as the json you described. — Jared Smith
– Jared Smith, Commented May 11, 2018 at 12:03

Rilwan · Accepted Answer · 2018-10-31 05:20:10Z

4

You can use async/await. It requires fewer lines of code.

async getData(){
   const res = await fetch('./data/data.json');
   const data = await res.json();
   return this.setState({data});
}

In the componentDidMount() call the function i.e.

componentDidMount(){
   this.getData();
}

Finally, in your render, you map the array of data

render (){
   return {<ul>{this.state.data.map(item => <li>{item.title}</li>)} </ul>
)
}

answered Oct 31, 2018 at 5:20

Rilwan

411 bronze badge

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

Comments

Jared Smith · Accepted Answer · 2018-10-31 11:03:56Z

2

Your response isn't an object with a title property, it's an array of objects, all of which have title properties.

this.setState({ data: findresponse });

and then in your render

<ul>
  {this.state.data.map((x, i) => <li key={i}>x.title</li>)}
</ul>

edited Oct 31, 2018 at 11:03

answered May 11, 2018 at 12:02

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

Comments

Boky · Accepted Answer · 2018-05-11 12:13:55Z

1

You get the array of objects, thus you need to store then whole object in your state and then from the state read all title properties.

Your fetch should look as follows:

fetch('./data/data.json')
.then((response) => response.json())
.then((findresponse)=> {
  this.setState({
    data:findresponse
  })
})

And then in your render you should have something as follows:

render(){
    return (
      <ul>{this.state.data.map(item => <li>{item.title}</li>)} </ul>
    )
}

That will give you all title properties from data object.

answered May 11, 2018 at 12:13

Boky

12.1k30 gold badges104 silver badges173 bronze badges

3 Comments

Jared Smith Over a year ago

This is different from my answer... how?

Boky Over a year ago

@JaredSmith You are right. The basis is the same. I didn't see your answer at all.

Jared Smith Over a year ago

Figured as much: I frequently spend a few minutes writing an answer only to discover someone beat me to the punch :)

Collectives™ on Stack Overflow

Fetch Data from json file in React.js

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related