Fetch JSON values from another file in React

Question

I have a JSON file like below.

defult.json

const serviceToUSe = [
    {
        "service": {
            "wordpress": {
                "price": 1,
                "image": "wordpress",
                "desc": "A simple wordpress template for you to start blogging / webpage now",
            }
        }
    }
];

export default serviceToUSe;

This file is located at public/service.

I would like to import above file to CreateService.js file located at src/ folder.

CreateService.js

import { serviceToUSe } from '../public/service/default.json';

class CreateService extends React.Component {

  ShowProvider(props) {
    var out;
    Object.keys(this.serviceToUSe.value).map((obj, i) => {
      out = <option>{this.serviceToUSe.value[obj]}</option>;
    }
    return out
  };
}

You can't put that into a .json file. Change the filename to default.js and change the export statement to export {serviceToUSe}. Will work like a charm. — codemonkey
– codemonkey, Commented Dec 24, 2020 at 17:24

Omkar76 · Accepted Answer · 2020-12-24 17:13:09Z

1

You are writing JavaScript in JSON file. You can't actually declare variables in JSON.

We generally use json-loader module to import JSON in react. If you have used CRA then it'll already be there.

Correct JSON :

[
    {
        "service": {
            "wordpress": {
                "price": 1,
                "image": "wordpress",
                "desc": "A simple wordpress template for you to start blogging / webpage now"
            }
        }
    }
]

Things to note :

No trailing commas
No semicolons at end of literal
No export statements

Now you can import it like this from JS files :

import serviceToUSe  from '../public/service/default.json';

edited Dec 24, 2020 at 17:13

answered Dec 24, 2020 at 16:59

Omkar76

1,6281 gold badge12 silver badges23 bronze badges

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

Comments

codemonkey · Accepted Answer · 2020-12-24 17:34:40Z

1

Unlike @Omkar76 in his very nice answer, I'm going to assume you actually want to end up with a javascript array rather than with a JSON text in your CreateService.js file. I'm making that assumption based on what you do with the serviceToUSe variable after you import it from default.json. So here is how to make your code work.

Change the file name from default.json to default.js because you're writing JS code on it.
Change the export statement to export {serviceToUSe}. So your default.js looks like this:

const serviceToUSe = [
    {
        "service": {
            "wordpress": {
                "price": 1,
                "image": "wordpress",
                "desc": "A simple wordpress template for you to start blogging / webpage now",
            }
        }
    }
];

export {serviceToUSe};

And this should do it.

answered Dec 24, 2020 at 17:34

codemonkey

7,9655 gold badges28 silver badges46 bronze badges

1 Comment

Omkar76 Over a year ago

In my solution OP won't end up with a string. Actually json-loader module handles the parsing of json. In my solution serviceToUSe will be a javascript array and not merely a string. I hope OP @abu will take note of this. Thanks :)

Collectives™ on Stack Overflow

Fetch JSON values from another file in React

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related