0

i'm kind of new to stackoverflow and i've been dealing for days with a problem. I have the next piece of code:

let comptot = function (value, data) {
     return fetch(API_TOT)
    .then(response => response.json())
    .then((data) => {
        let x = data[0].cantidad;
        console.log(x);
        return x;
    })
    .catch(error => {
        console.log("el error es el siguiente", error)
    })}

The problem is I can't access the value returned by it. It does log the value (230) to the console, but I want to display that value to a table (I'm using Tabulator), and it only returns:

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: "230"

I've read a bunch of quite similar questions but I can't figure out how to solve it. I also kind of understand how promises work, but obviously I didn't understood everything or I wouldn't be getting this problem (I also read a number of articles about promises and watched tens of youtube videos about promises and still nothing). I also tried using Async Await with the following code and had exactly the same problem:

let comtot = async function (value, data) {
    let response = await fetch(API_TOT);
    let com = await response.json();

    console.log(com[0].cantidad);
    return com[0].cantidad;
}

Please help me solve this, I would really apreciate it!

Charles Poplar
  • 59
  • 5
  • Please use comptot function inside a function which is also a async await function or wait for the promise to resolve before printing i.e either use '''comptop().then(result=>console.log) or use try using console.log(await comptop()) , note that the async await would work inside a function only. – Raghu Chahar Feb 11 '20 at 03:55
  • 2
    `async` functions return a Promise. You can `return com`, then use `.then`. – StackSlave Feb 11 '20 at 04:05
  • 1
    Also, this is the most popular duplicate for your question: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call?rq=1 – Paul Feb 11 '20 at 04:14
  • 1
    You get values out of a returned promise from a function you called with `await` or with `.then()`. Those are your only two choices. All `async` functions return a promise so you always have to use `await` or `.then()` on that returned value to get the value. – jfriend00 Feb 11 '20 at 05:29
  • 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) – Evert Feb 11 '20 at 07:12

2 Answers2

0

with this snippet,

let comptot = function (value, data) {
     return fetch(API_TOT)
    .then(response => response.json())
    .then((data) => {
        let x = data[0].cantidad;
        console.log(x);
        return x;
    })
    .catch(error => {
        console.log("el error es el siguiente", error)
    })
}

comptot references a Promise object as you mentioned, to extract its value use the .then() API,

comptot.then(res => {
  console.log("Resolved value", res);
}).catch(err => {
  console.log("Rejected value: ", err)
})

read more about promises and its .then() API

laxman
  • 1,781
  • 4
  • 14
  • 32
  • Ok, now I think I might be returning the data, at least is printing to the console. I did everything you and the guys from the comments told me to do (like using .then() to return the data, thanks for that one guys!) but I can't get Tabulator to show the value on the table. I'm trying to use a mutator to do it with the following code and can't get it to show the data: `mutator: comtot().then((res) => { console.log(res); return res; })` – Charles Poplar Feb 11 '20 at 18:24
  • I am not very much familiar with tabulator, but I would suggest to reads the MDN docs on promises and related APIs. Always remember, "a Promise/ its .then()/ .catch()/ or related APIs will always return a promise" – laxman Feb 12 '20 at 05:41
0

*This is the same answer for another question I posted. I didn't know what was wrong with my code so I posted two different questions for two things I thought were unrelated but i was wrong.

I figured it out, the problem was that in Tabulator, the mutator in the table was getting the data from another source than the one for the rest of the table, so the table was already built when the mutator started working, and what I figured out is that the mutator needs the data ASAP when it's fired, but it's source data wasn't ready yet, so what I did was to use:

function delayIt() {table.setData(API_URL)} setTimeout(delayIt, 1000)

so the data from the mutator source was already available when the table was built so when the mutator was fired it all worked just fine. I'm sorry if it's confusing, I couldn't figure out how to explain other way.

Charles Poplar
  • 59
  • 5