File not found error when trying to 'fetch' json in React App

Question

Am trying to read a Json file in my react app, but console shows that the url for my json file is 404. Can any one please look into what is wrong in my code

Below is the error shown in browser console. When I open the json url that is shown in network tab, it redirects to the page instead of showing json -

Below is my code -

-

import React from 'react';
import Header from './Header';
import Container from './Container'
import Footer from './Footer'

class App extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          products: []
        };
      }
    componentDidMount() {
        fetch("../json/results.json",{
            headers : { 
                'Content-Type': 'application/json',
                'Accept': 'application/json'
               }
        })
        .then(res => res.json())
          .then(
              console.log("--------"),
            (result) => {
              this.setState({
                isLoaded: true,
                products: result.Products
              });
            },
            // Note: it's important to handle errors here
            // instead of a catch() block so that we don't swallow
            // exceptions from actual bugs in components.
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
      }

    render(){
        const { error, isLoaded, products } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>;
          } else if (!isLoaded) {
            return <div>Loading...</div>;
          } else {
                return(
                    <div>
                    <Header />
                    <br></br>
                    <Container />
                    <ul>
                        {(products || []).map(item => (
                            <li key={item.content_id}>
                            {item.content_id} {item.content_type}
                            </li>
                        ))}
                    </ul>
                    <br></br>
                    <Footer />
                    </div>
                );
            }
    }
}

export default App;

My Json is as below -

{
    "Products": [
        {
        "content_id": "1211122910721",
        "content_type": "AVG_Product_C"
    ]
}

Why do you need to use fetch to load your local json? You can import json like how you import modules from library — Hemadri Dasari
– Hemadri Dasari, Commented Feb 8, 2019 at 6:22
@HemadriDasari am still a beginner, trying to learn React. Am not sure how to import and use JSON in my App.js file — An User
– An User, Commented Feb 8, 2019 at 6:27
Please share folder structure of your app component and Json file. Otherwise it’s difficult to help — Hemadri Dasari
– Hemadri Dasari, Commented Feb 8, 2019 at 6:30
The path looks absolutely right. Are you sure you are getting file not found error? — Hemadri Dasari
– Hemadri Dasari, Commented Feb 8, 2019 at 6:40

Varun Suresh Kumar · Accepted Answer · 2019-02-08 06:50:33Z

5

Since JSON file is already inside the react application you can import it directly. you can use fetch to get JSON/XML responses from other servers/API

import React from "react";
import Header from "./Header";
import Container from "./Container";
import Footer from "./Footer";
import JSONResult from '../json/results.json';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: JSONResult.Products || []
    };
  }
  render() {
    const { products } = this.state;
    return (
      <div>
        <Header />
        <br />
        <Container />
        <ul>
          {products.map(product => (
            <li key={product.content_id}>
              {product.content_id} {product.content_type}
            </li>
          ))}
        </ul>
        <br />
        <Footer />
      </div>
    );
  }
}

export default App;

edited Feb 8, 2019 at 6:50

answered Feb 8, 2019 at 6:32

Varun Suresh Kumar

8791 gold badge7 silver badges16 bronze badges

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

2 Comments

An User Over a year ago

am getting the same error even after using your code sample

Victor Jatobá Over a year ago

It generates an error informing: Module '"/path/.../results"' has no default export. In this case I added "resolveJsonModule": true in tsconfig.json inside of "compilerOptions" and import with this pattern: import * as JSONResult from '../json/results.json'; and everything works fine!

Sunny Prakash · Accepted Answer · 2021-02-21 17:19:46Z

0

I faced this situation today. Got to know what was happening. It seems the app is looking for the JSON file at the root level or inside the public folder present at the root level.
And if someone still looking for a solution related to the usage of local JSON (mimicking server calls) then make sure you put the JSON at the root level of your project. So there could be two scenarios I can think of -

If you have a public folder at root level --> I am taking the above scenario mentioned in the question. Your JSON should be present inside /public/json/results.json
If you don't have a public folder --> Put the JSON file at the root level same as your src.

answered Feb 21, 2021 at 17:19

Sunny Prakash

8801 gold badge9 silver badges14 bronze badges

Collectives™ on Stack Overflow

File not found error when trying to 'fetch' json in React App

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related