How do you access the JSON when using fetch?

Question

I am using fetch() to import a json file called map.json, but I can't seem to access it. Here is my code:

export function importJSON(url) {
    return fetch(url)
        .then(r => r.json())
        .then(data => {
            return data;
        });

}

then I call the function to a variable called json, and log it to the console:

const json = importJSON('../src/JSON/map.json');
console.log(json);

When I log it though, it doesn't just say what my JSON file is, it just shows the Promise and I don't know how to access it, it's under [[PromiseResult]]:

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object
map: {platform: {…}}
__proto__: Object

And under Promise is the JSON (as you can see the map and platform). How do I access the JSON?

Well, it's a promise so `importJSON('../src/JSON/map.json').then(json => console.log(json))` or you can use async await. — Zsolt Meszaros, Dec 13 '20 at 20:27

score 0 · Accepted Answer · edited Jan 25 '21 at 17:36

0

You can do this with an async IIFE (immediately invoked function expression):

(async () => {
    const json = await importJSON('../src/JSON/map.json');
})();

edited Jan 25 '21 at 17:36

Zsolt Meszaros

21,961
19
54
57

answered Dec 13 '20 at 20:53

Or Assayag

5,662
13
57
93

How do you access the JSON when using fetch?

1 Answers1