I have two files that are arrays, and i want to load them from a fetch. I have an async function that fetch the files:

async function getData(file) {
    const data = await fetch(`./assets/resources/${file}.json`);
    return await data.json()
}

Then here is where i assign the variables to the return fo this fetch:

let notes = getData("notes").then(res => res)
let pentagrama = getData("pentagrama").then(res => res)

But with this all i get is: from google chrome console

How can i actually get the value?

I have two files that are arrays, and i want to load them from a fetch. I have an async function that fetch the files:

async function getData(file) {
    const data = await fetch(`./assets/resources/${file}.json`);
    return await data.json()
}

Then here is where i assign the variables to the return fo this fetch:

let notes = getData("notes").then(res => res)
let pentagrama = getData("pentagrama").then(res => res)

But with this all i get is: from google chrome console

How can i actually get the value?

• javascript
• json
• async-await
• fetch

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Dec 23, 2017 at 17:18 Juan Piza FerraJuan Piza Ferra 12044 silver badges1212 bronze badges 2

• You may have a look at how to return the response from an asynchronous call? – Jonas Wilms Commented Dec 23, 2017 at 17:25
• Yes thank you, this is the first time that i have to load first a data and use them in the future, i was a little bit confused why did this happened – Juan Piza Ferra Commented Dec 23, 2017 at 17:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The result of getData is always a Promise that resolves to your data. To access the values, you can use async/await:

(async () => {

    let notes = await getData("notes");
    let pentagrama = await getData("pentagrama");

    // use them here

})();

Alternatively, you can use Promise.all to wait for both promises to resolve, and then access the received data:

let notesP = getData("notes");
let pentagramaP = getData("pentagrama");

Promise.all([noteP, pentagramaP]).then(res => {

    let notes = res[0];
    let pentagrama = res[1];

    // use them here

});

ASYNC

AWAIT

This will work for you if you just want to check the response in your Google Chrome console because in the console you can use await without an async function which probably could be because everything executed in the console is wrapped in an async function by default(just a speculation).

ONLY WORKS IN CONSOLE:

const getData = (file) => (
  fetch(`./assets/resources/${file}.json`).then(data => data.json());
)

let notes = await getData("notes")
let pentagrama = await getData("pentagrama")

But if you want to get this working in an application, remember that you ALWAYS need to wrap an await inside async

TO GET IT WORKING IN AN APPLICATION:

const getData = async (file) => (
  await fetch(`./assets/resources/${file}.json`).then(data => data.json());
)

const wrapperFunc = async () => {  
  let notes = await getData("notes")
  let pentagrama = await getData("pentagrama")
}