loop through array issue

Question

I am calling an API that returns an array, i am trying to loop through the array but console is saying that the lenght is 0, never seen anything like it before and can not find out what is the issue here:

const funCall=async()=>{

      const userNFTsURLs = await prepareData();
      setNFTsUrls(userNFTsURLs);
}

  const prepareData = async () => {
    const res = await getUserNFTs();
    console.log(res);
/*returns 
0: "ipfs://QmbNHPexuZWo3rnzAyyzZxTsAmMuN97R8Z7qwuPfEMXeX9/4.json"
1: "ipfs://QmbNHPexuZWo3rnzAyyzZxTsAmMuN97R8Z7qwuPfEMXeX9/41.json"
2: "ipfs://QmbNHPexuZWo3rnzAyyzZxTsAmMuN97R8Z7qwuPfEMXeX9/45.json"
3: "ipfs://QmbNHPexuZWo3rnzAyyzZxTsAmMuN97R8Z7qwuPfEMXeX9/47.json"
4: "ipfs://QmbNHPexuZWo3rnzAyyzZxTsAmMuN97R8Z7qwuPfEMXeX9/49.json"
5: "ipfs://QmbNHPexuZWo3rnzAyyzZxTsAmMuN97R8Z7qwuPfEMXeX9/51.json"
length: 6
[[Prototype]]: Array(0)*/

    console.log(res.length);//returns 0


    res.map((rest: string) => console.log(rest));
    const test = res.map((url: string) => {
console.log(url)//does not return anything is not being called
      return url;
    });

    return res;
  };

getUserNFTs function, I just console logged the last forEach, it is loging it after it is logged on the component consuming it, it is very strange.

 const getUserNFTs = async () => {
    if (store.getState().blockChain.smartContract === null) {
      await connectToContract();
    }
    try {
      const balance = await getUserTokensBalance();
      if (balance <= 0) {
        return [];
      }
      let tokenIds = [];
      for (let i = 0; i < balance; i++) {
        const tokenId = await blockChain.smartContract.methods
          .tokenOfOwnerByIndex(walletId, i)
          .call();
        tokenIds.push(tokenId);
      }

      let tokensList: any = [];

      tokenIds.forEach(async (tokenId) => {
        const token = await blockChain.smartContract.methods
          .tokenURI(tokenId)
          .call();
        console.log("token", token);//logs it on console after logs al the other console logs

        tokensList.push(token);
      });

      return tokensList;
    } catch (error) {
      console.log(error);
    }
  };

what am I not getting here? I feel very frustrated after couple of hours trying to find out

is a call to a smart contract, basically returns the array with strings — Jgarnie, May 06 '22 at 14:43
Can you include the output of `JSON.toString(res)` in your post so we can see the exact structure of your array? — flwd, May 06 '22 at 14:46
console.log(JSON.stringify(res)); returns [] empty array, that is very strange — Jgarnie, May 06 '22 at 14:49
I added the function below in the post, is console loging after all the console logs in the other. functions. which is strange for me — Jgarnie, May 06 '22 at 14:59
Could you try changing `tokenIds.forEach` to a regular for loop? — Ben Stephens, May 06 '22 at 15:04
You have a problem with your asynchronity. The tokenIds being logged after the consumer are proof of that. — flwd, May 06 '22 at 15:05
https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop — Ben Stephens, May 06 '22 at 15:09

score 1 · Accepted Answer · answered May 06 '22 at 15:08

1

Your problem is you're using forEach which is not waiting for results as you expected.

You should modify it to a usual for loop to get rid of async callback function in forEach.

for(const tokenId of tokenIds) {
        const token = await blockChain.smartContract.methods
          .tokenURI(tokenId)
          .call();
        console.log("token", token);//logs it on console after logs al the other console logs

        tokensList.push(token);
};

answered May 06 '22 at 15:08

Nick Vu

14,512
4
21
31

wow, thanks a lot!, i wasted half day trying to find a solution for this thing, did not see anywhere that for each does not wait for response but deffinetly good to know for the future, :) – Jgarnie May 06 '22 at 15:13
1

You're welcome!~ Just one side note that, for all these kinds of callback functions, you need to be careful with `async/await`. They may never return results in callbacks @Jgarnie – Nick Vu May 06 '22 at 15:16

loop through array issue

1 Answers1