For loop with fetch returning empty array

I'm writing a server route that makes api calls.

I need to make two different fetch requests cause I need more info that's coming in the first fetch.

The problem is that I'm declaring a variable out of the promise scope and for some reason, my res.send is not awaiting until the array gets full.

I need to iterate until result 9 (I can't use theDogApi's predefined filters to show nine results!)

if (req.query.name) {
    var myRes = [];
    fetch(`https://api.thedogapi.com/v1/breeds/search?name=${req.query.name}&apikey=${key}`)
        .then(r => r.json())
        .then( data => {

            for (let i = 0; i < 8 && i < data.length; i++) {
                fetch(`https://api.thedogapi.com/v1/images/${data[i].reference_image_id
                    }`)
                    .then(r => r.json())
                    .then(datos => {

                        myRes.push({ ...data[i], ...datos });
                    })
            }
        })
        .then(res.send(myRes))
}

I'll appreciate the help!



Read more here: https://stackoverflow.com/questions/66269311/for-loop-with-fetch-returning-empty-array

Content Attribution

This content was originally published by florci1 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: