How can I import and use data from a JSON file in my React app?

Question

I've been programming in React for a couple days now and have come across an issue utilizing a JSON file.

I'm currently using a hard coded list of...

    const vendorList = [
        {
            id: 0,
            name: "Laerdal Medical Corporation",
            sections: [
                {
                    name: "Product",
                    payload: [
                        {id: 1, name: "ASL 5000 Lung Solution"},
                    ]
                },
                {
                    name: "Demos",
                    payload: [
                        {id: 1, name: "ASL 5000 Lung Solution", url: "ASL 5000 Lung Solution - High Fidelity Lungs for SimMan and SimBaby (laerdal.com)", type: "video"}
]

To populate some "VendorCards". I now have a JSON file with the same data in it...

{
    "vendorList" : [
            {
                "id": 1,
                "name": "Laerdal Medical Corporation",
                "sections": [
                    {
                        "name": "Products",
                        "payload": [
                            {"id": 1, "name": "ASL 5000 Lung Solution"}
                        ]
                    },
                    {
                        "name": "Demos",
                        "payload": [
                            {"id": 1, "name": "ASL 5000 Lung Solution", "url": "ASL 5000 Lung Solution - High Fidelity Lungs for SimMan and SimBaby (laerdal.com)", "type": "video"}
                        ]
                }
            ],
            "tags": ["Tag 1","Tag 2"]
        }]

How do I go about changing from my hardcoded list, to my JSON object? I am able to import the JSON object after reading other stackoverflow questions using import myJson from './data.json', but can't figure out how to put the json object in vendorlist. Thanks for your time!

@evolutionxbox I was led to believe by a colleague that I could simply do something like `vendorlist = myJson`, but i'm guessing from your response that isn't possible — Bob, Feb 22 '21 at 16:58
Depends on how the JSON is retrieved. Is it being imported? returned from a fetch? etc — evolutionxbox, Feb 22 '21 at 17:00
Then it probably is getting parsed automatically. What about using `vendorlist.push(myJson.vendorList[0])`? — evolutionxbox, Feb 22 '21 at 17:12
I don't have access to that code so I'm not sure what to suggest. — evolutionxbox, Feb 22 '21 at 17:17
@evolutionxbox looks like that worked! Is there an easy way to put all JSON objects into my vendorlist... like a for each item in myJson.vendorlist... push to vendorlist? If you could throw that in an answer i'd be happy to accept. You've been very helpful! — Bob, Feb 22 '21 at 17:21
Possible dupe: https://stackoverflow.com/questions/39686035/import-json-file-in-react — isherwood, Feb 22 '21 at 17:29

evolutionxbox · Accepted Answer · 2021-02-22T17:32:02.590

From your comments it looks like the JSON is being imported using

import myJson from ./data.json';

which I then assume it is being automatically parsed. (So no need for JSON.parse)

After this, it is only a matter of pushing the data into vendorlist.

vendorlist.push(...myJson.vendorList);

If you don't want to mutate vendorlist you can also create a new array by combining the two.

const newlist = [...vendorlist, ...myJson.vendorList];
// or
const newlist = vendorlist.concat(myJson.vendorList);

How can I import and use data from a JSON file in my React app?

1 Answers1