Await fetch returns a promise, not the data

Question

I am fetching and processing the data from a spreadsheet as follows:

const getJsonSheet = async () => {
    const response = await fetch('<FETCH-SPECIFIC-SPREADSHEET-LINK>');
    const data = await response.json();
    let cells = await data.feed.entry;
    let table = {
        massa:[],
        description:[],
        price:[],
        imgLink:[]
    };
    await cells.map( cell => {
        if ( parseInt(cell.gs$cell.row) > 1) {
            let rowValue = parseInt(cell.gs$cell.row) - 2;
            let inputValue = cell.gs$cell.inputValue;

            switch (cell.gs$cell.col) {
                case "1":
                    table.massa[rowValue] = inputValue;
                    break;
                case "2":
                    table.description[rowValue] = inputValue;
                    break;
                case "3":
                    table.price[rowValue] = inputValue;
                    break;
                case "4":
                    table.imgLink[rowValue] = inputValue;
                    break;
                default:
                    console.log('Cell out of range.')
                }
        }        
    })

    return table;
};

export default getJsonSheet;

I import and execute getJsonSheet() in another file, assigning it's value to a variable, then I console.log this variable. I expected to have the table object logged into the console, but actually a Promise is logged. However, this logged promise is fullfilled and has the "table" object as it's result. I don't yet fully understand Promises, async and await - I'm new to this specific topic.

Is there a way to get the "table" object directly assigned to a variable so I can manipulate the DOM somewhere else using it?

PS:the data is being fetched correctly, since all I wanted is in the promise's result. My problem is in getting the promise's result assigned to a variable.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise — John, Jan 06 '21 at 02:00
You need to `await` `getJsonSheet()` in another file. Asyc code propagates up in the execution stack. — Beniamin H, Jan 06 '21 at 02:00
@BeniaminH but for that, I have to do it inside an async function, right? This means that I only will be able to use this data assigned to a variable in the scope of that function? — Davi Alefe, Jan 06 '21 at 02:03
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Heretic Monkey, Jan 06 '21 at 02:08
Why are you `await`ing `data.fee.entry`? It can't possibly be a Promise. Also, there does not appear to be any async code in your `cells.map`, so there's no reason to `await` that either. — Heretic Monkey, Jan 06 '21 at 02:11
@HereticMonkey I thought I had to await in every variable that depended on the first. Yes, your link does answer my question, partially. Thank you. — Davi Alefe, Jan 06 '21 at 02:24

Beniamin H · Answer 1 · 2021-01-06T02:38:02.347

Take a look at the below example:

async function f3() {
  const y = await 20;
  return 5;
}

console.log(f3());

prints:

Promise {<pending>}

But this:

async function f3() {
  const y = await 20;
  return 5;
}

console.log(await f3());

prints:

Where your console.log needs to be on your execution stack top level or in another async function if you wish to return 5, like here:

async function f3() {
  const y = await 20;
  return 5;
}

async function f_another() {
  return await f3();
}

score 0 · Answer 2 · answered Jan 06 '21 at 08:26

0

since async function will be runed in async way, so you will always get sync result(Promise obj). correct usage is:

async function test()
{
    return 'hello async';
}
//call it
test().then(res){console.log(res)}

answered Jan 06 '21 at 08:26

VoteIt.Top

1
1

Await fetch returns a promise, not the data

2 Answers2