How to access json file in src folder created using create react app

Question

I'm a newbie to react. I have created react application using npx create-react-app. In actions,axios.get is throwing localhost:3000 file not found error. Below is the code which is in src/actions/index.js

       export function lang(language) {
      let url = "./../resources/strings/strings_" + language + ".json";
      return dispatch => {
        axios.get(url).then(response => {
          console.log(response.data)
        }).catch(response => {
          console.log(response);
        });
      }
    }

This is the project structure [1]: https://i.sstatic.net/CwTJg.png

What am I doing wrong? I couldn't find a proper solution for this. Thanks in advance.

Possible duplicate of Unable to fetch data from local json file by axios — Easwar
– Easwar, Commented Nov 28, 2018 at 12:34
Is there a way i can achieve this by keeping json file in src folder? — Prox4
– Prox4, Commented Nov 28, 2018 at 12:46

ekr990011 · Accepted Answer · 2018-11-28 19:33:20Z

3

I agree with Easwar, you need to look at the answer to that question.

It appears axios only operates in the /public folder so you would need your json files in the public folder. You could put them within a folder in the public folder if you wanted.

This makes sense because the webpack bundle is in the public folder and once the app is bundled only files within the public folder are available to your react project.

Since axios is an xhr request library at the moment you use it the only file structure it can possibly see is in the public folder so most likely: index.html, manifest.json, and your webpack bundle.js which has all your js code bundled into 1 file.

answered Nov 28, 2018 at 19:33

ekr990011

7442 gold badges7 silver badges24 bronze badges

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

7 Comments

Prox4 Over a year ago

Is there a way i can achieve this by keeping json file in src folder? @ekr990011

ekr990011 Over a year ago

Only if you use instead an import or require not axios. Since you are in react and most likely es6 if you used create-react-app, import "[file-path-here]". Axios can't because it happens at the event you use it at. Is there a reason you want to use axios to get at those json files? The answer to this question talks about importing json files: stackoverflow.com/questions/39686035/import-json-file-in-react

ekr990011 Over a year ago

Axios is really for fetching data from a server. If you didn't want your end user to download those json files until requested you really need a web server separate from your react front end to house that json data then you can request that data from the server with axios.

Prox4 Over a year ago

I need to import json files dynamically based on language chosen. How can I do it? import langaugePath from './../resources/strings/strings_" + language + ".json' . Here language should be replaced by localStorage value

ekr990011 Over a year ago

Well your language variable could be from your state for example. I assume the end user gets to choose their language, which means you most likely have it in state somewhere or as a prop passed down to this component that is going to serve up the language json.

|

Collectives™ on Stack Overflow

How to access json file in src folder created using create react app

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related