How to get promise result in this case

Question

I must fill a table with the data that I bring from the call to an api, after this call another api (QRCODES) to generate a Qr image with that data.

the problem is that in the resulting array to pass to the table the field where the address to the image should go (qr code) I am getting a "promise" object

    const setTable = async () => {
        console.log(selectedChannel);
        productsService.getProducts(selectedChannel.name, selectedCategory.id).then(data => {
            setProducts(data.data)
            const dataTable = []
            const allArray = data.data
            console.log(allArray)
            let row = {}
            let link = ''
            let qrImage = ''


            allArray.forEach(product => {
                link = "https://motitools.deco.cl/" + selectedChannel.name + "/es-CL/products/" + product.slug
                qrImage = QRCode.toDataURL(link)
                row =  { "imagenQr": qrImage, "category": product.category, "name": product.name, "price": product.price, "image": product.image }
                dataTable.push(row)
            });
            console.log(dataTable)
            setTableConten(dataTable)
        });

The result of qrImage = QRCode.toDataURL(link)

imagenQr: Promise
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL

how can i get the value of [[PromiseResult]]?.

Usefull info: 1.- make: qrImage = await QRCode.toDataURL(link) gives me this error

2.- make QRCode.toDataURL(link).then( data => console.log(data)) return all the codes in console, how set a variable with this value ?

im new on javascript

[How do I ask a good question?](https://stackoverflow.com/help/how-to-ask): _"**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. Please reserve the use of images for diagrams or demonstrating rendering bugs, things that are impossible to describe accurately via text. "_ — Andreas, Aug 23 '22 at 14:57
_"im new on javascript"_ - Then don't rely on [ASI](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) and always use semicolons — Andreas, Aug 23 '22 at 15:00
@Andreas I'll include the tips next time, thanks for the critique — Motias, Aug 23 '22 at 15:18
Not _"next time"_. Please [edit](https://stackoverflow.com/posts/73460917/edit) your question now. — Andreas, Aug 23 '22 at 15:24

score -3 · Accepted Answer · answered Aug 23 '22 at 15:08

You can use await, but not in the non async callback. Mixing then with async is rarely a good idea. So drop the .then call, and use await instead, and make the inner callback async.

Some other remarks:

The .forEach() + push pattern is better replaced with .map() which returns the desired array.
I'd also use some destructuring assignments to simplify some code.
Use semicolons to separate your statements.
Don't declare variables with a larger scope than needed (like row, link, qrImage,...)

const setTable = async () => {
    const {data} = await productsService.getProducts(selectedChannel.name, selectedCategory.id);
    setProducts(data);

    const dataTable = await Promise.all(data.map(async ({slug, category, name, price, image}) => {
        const link = "https://motitools.deco.cl/" + selectedChannel.name + "/es-CL/products/" + slug
        const qrImage = await QRCode.toDataURL(link);
        return { "imagenQr": qrImage, category, name, price, image };
    }));
    setTableConten(dataTable);
};

How to get promise result in this case

1 Answers1