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
– JGarnie, Commented May 6, 2022 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
– flwd, Commented May 6, 2022 at 14:46
console.log(JSON.stringify(res)); returns [] empty array, that is very strange — JGarnie
– JGarnie, Commented May 6, 2022 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
– JGarnie, Commented May 6, 2022 at 14:59

Nick Vu · Accepted Answer · 2022-05-06 15:08:32Z

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 6, 2022 at 15:08

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

2 Comments

JGarnie Over a year ago

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, :)

Nick Vu Over a year ago

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

Collectives™ on Stack Overflow

loop through array issue

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related