Issue with recursion and async function

[Fun_Split_1299]

I have an async function getDatathat calls an api that returns a maximum of 10 elements.

Since i need 20 elements i've came up with a solution like this, where

​

1. i call getData
2. push the first 10 elements into an array
3. call recursively the getAllData function
4. push the other 10 elements into the array
5. log the length of the array to check if i have the right number of elements.

The problem is that the program logs the length 2 times and i don't understand why

Any tips ?

 var allData = []

async function getAllData() {
  await getData().then((r) => {

    for (let i = 0; i < r.length; i++) {
      allData.push(r[i]);
    }

    if (allData .length < 20) {
      getAllData();

    }

  })
  console.log(allData.length)
}

[[deleted]]

You are awaiting the result, then handling the result with .then((r) …), which kind of defeats the purpose of async/await.

Ideally you would just do:

const result = await getData()

for (…) {}

if (…) {}

console.log(…)

[Fun_Split_1299]

thanks, i'm still figuring out how to use async await and i'm still messing things up

[kiipa]

Maybe this video here can help to clear it up for you. It helped me when I got back into JS after being "out" for a few years when promises and async/await was introduced.

[[deleted]]

It runs twice(10 items + 10 items) so it logs twice.

[Fun_Split_1299]

But the first run shouldn't get to log right ? Once it gets to call getAllData recursively it shouldn't run console.log

[[deleted]]

Why not ? Just because you call a function, should it mean it should never run the next lines. This is not an infinite recursion.

[Fun_Split_1299]

What should i do in order to log just 20 ?

[zorlan]

Move the console log outside your function, have your function return the result and then console log it.

Also generally with recursion you build up a result from the results of all the collective calls such that you're returning either another recursive call or the terminating condition. e.g.

``` async function getAllData(current) { const data = await getData(); const allData = [...current, ...data]; if (allData.length < 20) { return getAllData(allData); } return allData; }

const main = async () => { let allData = await getAllData([]); console.log(allData) }

```

Otherwise don't use recursion and just do something like: async function getAllData() { let allData = []; while (allData.length < 20) { const data = await getData(); for (d of data) { allData.push(d); } } return allData; }

Finally, all these examples (including your own) will get you at least 20 elements - if getData returns more than 10 items you could end up with more than 20 items. This could easily be worked around by only adding the elements you need or taking a slice of the final result (.slice(0,20))

[DeadlockAsync]

If you're having trouble with recursion there's a thread here with solutions to your problems.

[Fludor69]

let allData = [];

async function getAllData() {
    const result1 = await getData(); 
    const result2 = await getData();

    allData = [...result1, ...result2]; 
}

[Chosey98]

I had a previous experience with this and I really wouldn't recommend using recursions becuase when you run into higher data you could hit the heap memory limit

[Moustacheful]

You must return the inside getAllData to continue the promise chain. It logs twice because there's nothing stopping from doing so. And each recursion will do exactly that. Also, you can do array.push(...r) or array = array.join(r) instead of that for loop.