How to read a local JSON file, from the browser?

Question

I know this issue has been discussed before, but all solutions i have found are from years ago, and do not work.

What i need to do, is to load some config fields from a JSON file, sitting in the public directory of my React app. Just a static asset, outside of the build process

When i try fetching it using AJAX, i get an error on an "Unexpected token ':'". My config.json file looks simply like this:

{
    "name": "yoyo"
}

It's located in the public directory of a create-react-app program. Is there any way this can be done?

Edit: everything is working, i just had some stupid mistake

There's nothing wrong with the json you've presented. You need to show us how you are reading it in and how you are attempting to parse it. — Taplar, Jan 17 '20 at 19:18
Does this answer your question? [read local JSON file into variable](https://stackoverflow.com/questions/48073151/read-local-json-file-into-variable) — jwatts1980, Jan 17 '20 at 19:24

score 0 · Answer 1 · answered Jan 17 '20 at 19:26

0

Why don’t you just import it instead of doing request? If you are doing it for any reason, have you tried something like JSON.parse?

answered Jan 17 '20 at 19:26

Muhammad Hassan Khan

149
5

Juan Marco · Answer 2 · 2020-01-17T20:30:03.373

I updated my question when I noticed you wanted to load a JSON file from the public directory of your project.

To do this, use fetch and load the file present from the public folder, then set it for use inside your main component (e.g.: App.js).

Here's an example using React Hooks:

import React from "react";
import "./styles.css";

export default function App() {
  const [characters, setCharacter] = React.useState(null);

  React.useEffect(() => {
    fetch("names.json")
      .then(results => results.json())
      .then(character => setCharacter(character));
  });
  return (
    <div className="App">
      <h1>Star Wars names!</h1>
      <ul>
        {characters.map(character => (
          <li key={character.name}>{character.name}</li>
        ))}
      </ul>
    </div>
  );
}

Working example using the new useEffect hook here

Working example using good old componentDidMount here

How to read a local JSON file, from the browser?

2 Answers2