How to get json data using fetch in react

Question

I'm using react and working on getting json files in the component.

I want to get the input.json file using fetch, but it's not data in the console. Why is this and how do I get the data?

input.json

{
    "formId": 1,
    "title": "from",
    "items": [{
      "itemId": 1,
      "title": "style",
      "formType": 1,
      "options": [{
        "id": 1,
        "text": "one"
      }, {
        "id": 2,
        "text": "two"
      }, {
        "id": 3,
        "text": "three"
      }]
    }

App.js

import React from 'react';
import './App.css';
import inputData from './assets/input.json';

function App() {

  const getData = () => {
    fetch(inputData).then(response => {
               return response;
             }).then(data => {
               console.log(data);
             }).catch(err => {
               console.log(err)
             });
  }

  getData();

  return (
    <div className="App">
      <h2>Fetch</h2>
    </div>
  );
}

export default App;

console.log

How you exported your json in `input.json` file, as `default` export? — ravibagul91, Sep 23 '19 at 13:51
Possible duplicate of [How to read JSON file with fetch() in javascript?](https://stackoverflow.com/questions/51859358/how-to-read-json-file-with-fetch-in-javascript) — ravibagul91, Sep 23 '19 at 13:56
I'll check. The problem seems to be that json file is not being exported. Thank you for your answer. — smooth97, Sep 23 '19 at 14:12

score 0 · Answer 1 · answered Sep 23 '19 at 13:04

0

you are missing something in your result fetching, it should be

 fetch(inputData).then(response => {
            response.json().then(data => {
            console.log(data);
          }).catch(err => {
            console.log(err)
          });

answered Sep 23 '19 at 13:04

Ariel Batista

144
1
5

score 0 · Answer 2 · answered Sep 23 '19 at 13:05

0

Did you try with parsing response to json format?

something like this:

import inputData from '../assets/input';

const getData = () => {
 fetch(inputData).then(response => {
const result = response.json()
            return result;
          }).then(data => {
            console.log(data);
          }).catch(err => {
            console.log(err)
          });
}

answered Sep 23 '19 at 13:05

GeronimoSRB

1

An error occurs when you perform response.json() because it is already a json file. Thank you for your answer! – smooth97 Sep 23 '19 at 13:36

score 0 · Answer 3 · answered Sep 23 '19 at 13:42

Try this,

import React from 'react';
import './App.css';
import inputData from './assets/input.json';

function App() {

  const getData = () => {
    fetch(inputData).then(response => {
                console.log(response);
                console.log(response.data);
              }) catch (err => console.log("err",err))
  }

  getData();

  return (
    <div className="App">
      <h2>Fetch</h2>
    </div>
  );
}

export default App;

Thank you for your answer. But it's the same thing. – smooth97 Sep 23 '19 at 13:51 — smooth97, Sep 23 '19 at 13:51

How to get json data using fetch in react

3 Answers3