Empty array returned when using fetch in a for loop

Question

Empty array returned when using fetch in a for loop

Currently, I am developing a server route to execute API calls.

I have encountered the need to make two separate fetch requests as I require additional information that is not available in the first fetch.

The issue lies in declaring a variable outside of the promise scope, causing my res.send function to not wait until the array is populated entirely.

My objective is to iterate until result 9 is achieved (predefined filters from TheDogApi cannot be used to display 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))
}

Your assistance on this matter would be greatly appreciated!

javascript express promise fetch

Answer 1

Answer №1

If you want to combine multiple fetch calls into a single promise that resolves when all responses are received, consider using Promise.all. This method will handle the aggregation of promises and ensure that all requests are completed successfully. To handle failures individually, you can use Promise.allSettled instead. Remember to catch any errors that occur during the process.

Always check the response.ok property before parsing the JSON data with .json(). It is essential to verify that the request was successful before proceeding. If the response is not okay, throwing an error and handling it in the .catch block is a common practice. Creating a wrapper function for fetch can also help reduce code verbosity.

Instead of using a traditional loop, consider using Array#slice to extract a subset of elements from an array. For arrays with fewer than 8 elements, this approach will work seamlessly without causing any issues.

// mock everything
const fetch = (() => {
  const responses = [
    {
      json: async () => 
        [...Array(10)].map((e, i) => ({reference_image_id: i}))
    },
    ...Array(10)
      .fill()
      .map((_, i) => ({json: async () => i})),
  ];
  return async () => responses.shift();
})();
const req = {query: {name: "doberman"}};
const key = "foobar";
const res = {send: response => console.log(`sent ${response}`)};
// end mocks

fetch(`https://api.thedogapi.com/v1/breeds/search?name=${req.query.name}&apikey=${key}`)
  .then(response => response.json())
  .then(data => 
    Promise.all(data.slice(0, 8).map(e =>
      fetch(`https://api.thedogapi.com/v1/images/${e.reference_image_id}`)
        .then(response => response.json())
    ))
  )
  .then(results => res.send(results))
  .catch(err => console.error(err))
;

Answer 2

If you want to combine multiple fetch calls into a single promise that resolves when all responses are received, consider using Promise.all. This method will handle the aggregation of promises and ensure that all requests are completed successfully. To handle failures individually, you can use Promise.allSettled instead. Remember to catch any errors that occur during the process.

Always check the response.ok property before parsing the JSON data with .json(). It is essential to verify that the request was successful before proceeding. If the response is not okay, throwing an error and handling it in the .catch block is a common practice. Creating a wrapper function for fetch can also help reduce code verbosity.

Instead of using a traditional loop, consider using Array#slice to extract a subset of elements from an array. For arrays with fewer than 8 elements, this approach will work seamlessly without causing any issues.

// mock everything
const fetch = (() => {
  const responses = [
    {
      json: async () => 
        [...Array(10)].map((e, i) => ({reference_image_id: i}))
    },
    ...Array(10)
      .fill()
      .map((_, i) => ({json: async () => i})),
  ];
  return async () => responses.shift();
})();
const req = {query: {name: "doberman"}};
const key = "foobar";
const res = {send: response => console.log(`sent ${response}`)};
// end mocks

fetch(`https://api.thedogapi.com/v1/breeds/search?name=${req.query.name}&apikey=${key}`)
  .then(response => response.json())
  .then(data => 
    Promise.all(data.slice(0, 8).map(e =>
      fetch(`https://api.thedogapi.com/v1/images/${e.reference_image_id}`)
        .then(response => response.json())
    ))
  )
  .then(results => res.send(results))
  .catch(err => console.error(err))
;

Answer 3

Answer №2

Here is a demonstration showcasing the use of an async function with await:

async function fetchData(queryName, key){
  const dataArray = [], response, jsonResponseArray = [];
  let firstResponse = await fetch(`https://api.thedogapi.com/v1/breeds/search?name=${req.query.name}&apikey=${key}`);
  let firstJson = await firstResponse.json(); // must be an Array
  for(let i=0, limit=8, jsonLength=firstJson.length; i<limit && i<jsonLength; i++){
    dataArray.push(fetch('https://api.thedogapi.com/v1/images/'+firstJson[i].reference_image_id));
  }
  response = await Promise.all(dataArray);
  for(let val of response){
    jsonResponseArray.push(val.json());
  }
  return Promise.all(jsonResponseArray);
}
// assumes req, req.query, req.query.name, and key are already defined
fetchData(req.query.name, key).then(data=>{
  // data is your JSON Array
});

Answer 4

Here is a demonstration showcasing the use of an async function with await:

async function fetchData(queryName, key){
  const dataArray = [], response, jsonResponseArray = [];
  let firstResponse = await fetch(`https://api.thedogapi.com/v1/breeds/search?name=${req.query.name}&apikey=${key}`);
  let firstJson = await firstResponse.json(); // must be an Array
  for(let i=0, limit=8, jsonLength=firstJson.length; i<limit && i<jsonLength; i++){
    dataArray.push(fetch('https://api.thedogapi.com/v1/images/'+firstJson[i].reference_image_id));
  }
  response = await Promise.all(dataArray);
  for(let val of response){
    jsonResponseArray.push(val.json());
  }
  return Promise.all(jsonResponseArray);
}
// assumes req, req.query, req.query.name, and key are already defined
fetchData(req.query.name, key).then(data=>{
  // data is your JSON Array
});

Answer 5

Answer №3

Utilizing JSON Efficiently

My unique perspective: It's time to put an end to repeatedly using low-level functions like fetch whenever dealing with JSON data. Let's simplify the process by creating a single function, getJSON, that can be utilized throughout the codebase -

const getJSON = s =>
  fetch(s).then(r => r.json())

const data =
  await getJSON("https://path/to/some/data.json")

// ...

Elevating URL and URLSearchParams Handling

Here's another fresh idea: Say goodbye to manually constructing URLs and struggling with api access logic. By establishing a DogApi endpoint with a base url and an apikey, we can streamline our API interactions -

const DogApi =
  withApi("https://api.thedogapi.com/v1", {apikey: "0xdeadbeef"})

Now, accessing this endpoint is as simple as inputting the desired parameters -

const breed = 
  // https://api.thedogapi.com/v1/breeds/search?apikey=0xdeadbeef&name=chihuahua
  await getJSON(DogApi("/breeds/search", {name}))
    

// ...

The implementation of withApi is straightforward -

const withApi = (base, defaults) => (pathname, params) =>
{ const u = new URL(url) // <- if you don't know it, learn URL
  u.pathname = pathname 
  setParams(u, defaults)
  setParams(u, params)
  return u.toString()
}

function setParams (url, params = {})
{ for (const [k,v] of Object.entries(params))
    url.searchParams.set(k, v)  // <- if you don't know it, learn URLSearchParams
  return url
}

Paving the Way for Efficiency

With this approach, crafting functions like imagesForBreed becomes effortless, along with any other JSON-related or DogApi operations -

async function imagesForBreed (name = "")
{ if (name == "")
    return []

  const breed = 
    await getJSON(DogApi("/breeds/search", {name}))

  const images =
    data.map(v => getJSON(DogAPI(`/images/${v.reference_image_id}`))
  
  return Promise.all(images)
}

Furthermore, your Express handler can now be condensed into a single line without unnecessary .then callbacks or extensive API configurations -

async function fooHandler (req, res)
{ 
   res.send(imagesForBreed(req.query.name))
}

Answer 6

Utilizing JSON Efficiently

My unique perspective: It's time to put an end to repeatedly using low-level functions like fetch whenever dealing with JSON data. Let's simplify the process by creating a single function, getJSON, that can be utilized throughout the codebase -

const getJSON = s =>
  fetch(s).then(r => r.json())

const data =
  await getJSON("https://path/to/some/data.json")

// ...

Elevating URL and URLSearchParams Handling

Here's another fresh idea: Say goodbye to manually constructing URLs and struggling with api access logic. By establishing a DogApi endpoint with a base url and an apikey, we can streamline our API interactions -

const DogApi =
  withApi("https://api.thedogapi.com/v1", {apikey: "0xdeadbeef"})

Now, accessing this endpoint is as simple as inputting the desired parameters -

const breed = 
  // https://api.thedogapi.com/v1/breeds/search?apikey=0xdeadbeef&name=chihuahua
  await getJSON(DogApi("/breeds/search", {name}))
    

// ...

The implementation of withApi is straightforward -

const withApi = (base, defaults) => (pathname, params) =>
{ const u = new URL(url) // <- if you don't know it, learn URL
  u.pathname = pathname 
  setParams(u, defaults)
  setParams(u, params)
  return u.toString()
}

function setParams (url, params = {})
{ for (const [k,v] of Object.entries(params))
    url.searchParams.set(k, v)  // <- if you don't know it, learn URLSearchParams
  return url
}

Paving the Way for Efficiency

With this approach, crafting functions like imagesForBreed becomes effortless, along with any other JSON-related or DogApi operations -

async function imagesForBreed (name = "")
{ if (name == "")
    return []

  const breed = 
    await getJSON(DogApi("/breeds/search", {name}))

  const images =
    data.map(v => getJSON(DogAPI(`/images/${v.reference_image_id}`))
  
  return Promise.all(images)
}

Furthermore, your Express handler can now be condensed into a single line without unnecessary .then callbacks or extensive API configurations -

async function fooHandler (req, res)
{ 
   res.send(imagesForBreed(req.query.name))
}

Empty array returned when using fetch in a for loop

Answer №1

Answer №2

Answer №3

Similar questions

Using Vue.js, is it possible to apply a class to a clicked element and then remove it when another element is clicked?

What is the most effective way to loop through an object containing DOM selectors as values, and subsequently utilize them to assign new values?

The React ternary operator within HTML does not display the correct HTML output

The ajax signal indicates success, yet there seems to be no update in the database

Creating a Robust Next.js Build with Tailor-Made Server (Nest.js)

Shifting attention from the main point to the surrounding details (including siblings)

The extent of a nameless function when used as a parameter

A guide on extracting content from a PDF file with JavaScript

Tips on bringing data from a php file into a javascript variable

Is it possible to transfer data between two child components in Vue.js that share a common parent component?

Troubleshooting: Issues with jQuery.on method functionality

What is preventing my hidden field from being filled by a JavaScript function?

Switch or toggle between colors using CSS and JavaScript

The function is not recognized in C# programming language

I am looking to retrieve a specific input value from a JSON array using JavaScript

Arrange components within the form

Error injecting angular.bootstrap in Angular 1.6.5 version

What is the best method for choosing elements when I already possess a DOM element?

The functionality of ngModel is not functioning properly on a modal page within Ionic version 6

Meteor: Incorporating New Fields when Creating an Account