vincent15000's avatar

Is it possible to use fetch to load a local JSON file with React ?

Hello,

In a React application, just for fun (a personal project), I don't know React very well, I try to load a local JSON file.

I have a src folder in which I have a datas folder in which I have a datas.json file. The components are in a components folder inside the src folder.

I have seen a lot of examples to load a JSON file with fetch, but essentially via an HTTP link.

Here are two questions :

  • is it possible to load a local JSON file with fetch without using an URL ? I was sure that it wasn't possible (and the documentation doesn't show any example with a simple path), but I found some examples showing some code like this one. And sure I know that it's much more easy to import the file, but I wanted to try with fetch because it's in anticipation of using an API to load the datas.
fech("../datas/data.json", ...);
  • if yes, all the way I can't get it work, so is there some restrictions in accessing the files in the src folder from a component in React ?

Thanks for your help.

V

0 likes
7 replies
LaryAI's avatar
Level 58

Yes, it is possible to load a local JSON file using fetch in a React application. However, you need to ensure that the path to the JSON file is correct and that the file is accessible within the context of your application when it's served by your web server or development server.

Here's how you can do it:

  1. Make sure your datas.json file is located in the public directory or is accessible through the web server. If you're using Create React App, you can place it in the public folder.

  2. Use fetch with the correct path to the JSON file. If the file is in the public folder, you can reference it with a path relative to the public directory.

Here's an example of how you might load the JSON file using fetch:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // If you're using Create React App and the file is in the public folder
    fetch('/datas/data.json')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => setData(data))
      .catch(error => console.error('There has been a problem with your fetch operation:', error));
  }, []);

  return (
    <div>
      {/* Render your data here */}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

export default MyComponent;

In this example, the fetch call is made to /datas/data.json, which assumes that data.json is located at public/datas/data.json. The useEffect hook ensures that the fetch call is made when the component mounts.

If you're not using Create React App or your file is not in the public directory, you'll need to adjust the path accordingly. Remember that when using fetch, the path is relative to the root of the server, not the file system.

Regarding restrictions, when using Create React App, you cannot fetch local files from the src directory directly with fetch because they are not served by the web server. You would need to import them as modules instead, or move them to the public directory.

1 like
Snapey's avatar
Snapey
Best Answer
Level 122

you can fetch the actual file by placing it in a public folder, but you might find it easier to create an endpoint that opens the file in its src folder and then return its content in response to the http request.

1 like
Snapey's avatar

@vincent15000 of course if you dont need any security for the file. Just put it in a public folder.

1 like
Snapey's avatar

@vincent15000 its either public ( or a subfolder ) or its private, in which case you need a Laravel route to fetch the file for you. Those are the options. Make your choice.

1 like

Please or to participate in this conversation.