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
– ravibagul91, Commented Sep 23, 2019 at 13:51
Possible duplicate of How to read JSON file with fetch() in javascript? — ravibagul91
– ravibagul91, Commented Sep 23, 2019 at 13:56
I'll check. The problem seems to be that json file is not being exported. Thank you for your answer. — smooth97
– smooth97, Commented Sep 23, 2019 at 14:12

Ariel Batista · Accepted Answer · 2019-09-23 13:04:43Z

1

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, 2019 at 13:04

Ariel Batista

1541 silver badge5 bronze badges

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

Comments

GeronimoSRB · Accepted Answer · 2019-09-23 13:05:20Z

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, 2019 at 13:05

GeronimoSRB

1

1 Comment

smooth97 Over a year ago

An error occurs when you perform response.json() because it is already a json file. Thank you for your answer!

Dixit Savaliya · Accepted Answer · 2019-09-23 13:42:11Z

0

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;

answered Sep 23, 2019 at 13:42

Dixit Savaliya

4133 silver badges7 bronze badges

1 Comment

smooth97 Over a year ago

Thank you for your answer. But it's the same thing.

Collectives™ on Stack Overflow

How to get json data using fetch in react

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related