Array is looking empty, but have 4 objects

Question

I make a async function to get offers, and add to array with another array. But the offers array are looking empty in console, but when I click shows the itens.

The products are comming that's isn't the problem. The problem is that I can't add the arrayOffers to itemsArray.

OBS: the forEach is from p-interation lib.

this is my code.

useEffect(() => {
        if (auth && auth._id) {
            const fetchUserVisitedProducts = async (id) => {
                const user = await getPublicUserRequest(id);
                let array = [];

                forEach(user.offers_visited, async (id) => {
                    const offers = await getOfferRequest(id)
                    array.push(offers)
                });
                const arrayOffers = array;
                console.log(arrayOffers)
                const itemsArray = [ ...user.barbadas_visited, ...arrayOffers]
                console.log(itemsArray)
                
            }    
            fetchUserVisitedProducts(auth._id)
        }
  
    },[auth])

In the image, I see one array with 4 objects, but looks empty. And another array that is correct.

Looks like an async issue, you're not awaiting your forEach() call before logging so it's empty when first logged, but Chrome logs live arrays, so it gets updated in the view later. — pilchard
– pilchard, Commented Jan 25, 2022 at 18:21
Array is looking empty, but have 4 objects The reason for this is answered here: console.log of element.children shows 0 length but has three entries when expanded later — t.niese
– t.niese, Commented Jan 25, 2022 at 18:30

Gabriele Petrioli · Accepted Answer · 2022-01-25 18:23:13Z

3

Try replacing the

 forEach(user.offers_visited, async (id) => {
    const offers = await getOfferRequest(id)
    array.push(offers)
 });

with

  for (const id of user.offers_visited) {
    const offers = await getOfferRequest(id)
    array.push(offers)
  }

as forEach is not meant to be used with async.

answered Jan 25, 2022 at 18:23

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JoaoVitorLima Over a year ago

This forEach is from p-interation lib, and work I another async function. PS: I try your code but didnt work :(

t.niese Over a year ago

@JoaoVitorLima that’s an important information that belongs to the question. Anyhow, the forEach of p-interation returns a promise so await forEach(…. But if user.offers_visited is an array the for … of solution has to work.

JoaoVitorLima Over a year ago

I try to add for .. of, but shows Warning: Each child in a list should have a unique "key" prop. in console.

t.niese Over a year ago

@JoaoVitorLima That is a react error not related to the shown code.

JoaoVitorLima Over a year ago

The for…of didnt work. Because, everthing after the function arent working.

Collectives™ on Stack Overflow

Array is looking empty, but have 4 objects

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related