2

I'm trying to assign a variable inside a .then function but I don't know how to do that in svelte store. I know that its a promise and takes some time to be assigned.

Here is the code.

The map function

data.products.data = data?.products?.data?.map((item) => {
                let category = '';
                customPIMListStore.getProductCategory(item.productCategoryId, token).then((data) => {
                    category = data;
                    console.log('category inside', category);
                });
                return {
                    ...item,
                    category
                };
            });

The other function to get the category:

getProductCategory: async (id, token) => {
        const res = await api.get(`backoffice/v1/category/${id}`, token);
        return res?.category?.name;
    },
JustAG33K
  • 1,403
  • 3
  • 13
  • 28
Abdel
  • 51
  • 4
  • 1
    being a `.then` it's asynchronous – Jaromanda X Aug 12 '22 at 11:08
  • 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) – derpirscher Aug 12 '22 at 11:15

3 Answers3

3

You will have to await for it

data.products.data = await Promise.all(data?.products?.data?.map(async (item) => {
  const category = customPIMListStore.getProductCategory(item.productCategoryId, token)
  return {
    ...item,
    category
  };
}));
Konrad
  • 21,590
  • 4
  • 28
  • 64
  • I would have to make the function async and then the other items wont work! it comes back as undefined – Abdel Aug 12 '22 at 12:09
3

Since you have asynchrony, you'll need to change your code to

data.products.data = await Promise.all(data?.products?.data?.map(async (item) => {
    const category = await customPIMListStore.getProductCategory(item.productCategoryId, token);
    return {
        ...item,
        category
    };
}));

or

Promise.all(data?.products?.data?.map(async (item) => {
    const category = await customPIMListStore.getProductCategory(item.productCategoryId, token);
    return {
        ...item,
        category
    };
})).then(result => data.products.data = result);
Jaromanda X
  • 53,868
  • 5
  • 73
  • 87
  • Im afraid thats not gonna work for me! It stays the same problem outside the ```Promise.All``` doesnt take any changes – Abdel Aug 12 '22 at 12:08
  • 2
    @Abdel - in that case, the issue is that you don't know how asynchronous code works – Jaromanda X Aug 12 '22 at 12:47
  • Yeah, I need to do more study on that! Your code worked after I moved it inside the async function! Thank you!! – Abdel Aug 13 '22 at 15:55
1

You will have to do you own map implementation. Since the map function is not an async function.

productsData.forEach((item, i) => {
    let category = '';
    customPIMListStore.getProductCategory(item.productCategoryId, token).then((data) => {
        category = data;
        console.log('category inside', category);

        productsData[i] = {
            ...item,
            category
        }
    });
});

EDIT: Convert for loop to forEach loop for security reasons. pointed by Abdel

Malik12tree
  • 44
  • 1
  • 5