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!

1 thought on “For loop with fetch returning empty array”

  1. Here is an example of an async function unsing await:

    async function fun(queryName, key){
      const r = [];
      let firstWait = await fetch(`https://api.thedogapi.com/v1/breeds/search?name=${req.query.name}&apikey=${key}`);
      let firstJson = await firstWait.json(); // must be an Array
      for(let i=0,n=8,a,j,l=firstJson.length; i<n && i<l; i++){
        a = await fetch('https://api.thedogapi.com/v1/images/'+firstJson[i].reference_image_id);
        j = await a.json(); r.push(j);
      }
      return r;
    }
    // assumes req, req.query, req.query.name, and key are already defined
    fun(req.query.name, key).then(a=>{
      // a is your JSON Array
    });
    Reply

Leave a Comment