Category: React

Fetch json data in React

How to fetch JSON data in React?

Sample json data (sampledata.json) – 

[
 {“id”: “1”,”name”: “Sam”},
 {“id”: “2”,”name”: “John”},
 {“id”: “3”,”name”: “Alex”},
 {“id”: “4”,”name”: “Jack”}
]
React component to read the above json data – 

import React, { Component } from 'react';
var myRequest = new Request('sampledata.json');

export default class App extends Component {
render(){

fetch(myRequest)
   .then(function(response) {
     if (!response.ok) {
        thrownewError("HTTP error, status = "+response.status);
     }
     returnresponse.json();
    })
   .then(function(json) {
     for(vari=0; i<json.length; i++) {
       console.log(json[i]);
     }
   });
   return (
<div></div>
<pre>)
   }
}