Fetch Data from json file in React.js

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

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

How to read local JSON file in react js? - Rajdeep Singh, Axios or Fetch use to get or post data into the server. In our case, we read on the local folder file so that we use map(). Note: most important when  I am trying to render some JSON about a person's location from an api in my react app. I am using isomorphic-fetch to access the data from the API I can add the base test in and it correctly logs

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.

How to Display JSON data in ReactJS?, This examples helps to understand how to fetch the JSON file directly in component and parse only a specific section data. src\App.js. import React, { Component }  We don’t have to drill down to any directory since the json file is in the same directory as our index.html. The fetch function will return a promise. When the JSON data is fetched from the file, the then function will run with the JSON data in the response. If anything goes wrong (like the JSON file cannot be found), the catch function will run.

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>
)
}

#3 Try REACTJS Tutorial - Display Json Data, The most common way to read a JSON file into your ReactJS component will be to use the FETCH method. Since all the data we want is stored in an API, the  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. You could fetch the JSON

How to read JSON file using reactjs, React Tutorial: Consume a JSON REST API with Fetch and Styling UI with Bootstrap 4 How to render lists of data using the map() method and JSX and Open the src/App.js file and let's remove the default boilerplate code  Fetch Data from json file in React.js. I have a json file call data.json such as ( I use React.js): Im my componentDidMount I have the below: and in my render: Otherwise it says that .then((response) => response.json()) is an anonymous function . . .

React Tutorial: Consume a JSON REST API with Fetch and Styling , get local json. How to fetch local json file into constructor in reactjs. serdartkm. 7.4​k. 2. 429. Edit Sandbox. Files. public. src. data. index.js. styles.css. package. Because React uses components, it’s easy to make a fetch request, or pull data from an api, store it in one component, and then import the entire component to the app, or parent component. Since you may need to fetch from multiple sources, or have multiple fetches from the same source, dividing it up into components will help keep your code less cluttered.

get local json, We'll use it to fetch data from a third-party API and see how to use it when Component { state = { isLoading: true, users: [], error: null } render() { <React. In fact, let's use same JSON file we used for Fetch so we can see the  JavaScript Tip: Using fetch to Load a JSON File - Duration: 9:17. All Things JavaScript, LLC 43,005 views

Comments
  • 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(',')}
  • hmm so what should I do ? do you have any example ?
  • 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
  • Then you didn't post your actual code, or your fetch response isn't the same as the json you described.
  • This is different from my answer... how?
  • @JaredSmith You are right. The basis is the same. I didn't see your answer at all.
  • Figured as much: I frequently spend a few minutes writing an answer only to discover someone beat me to the punch :)