loop through array issue

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

Answer

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);
};

Advertisement

Answer