How do I get resolved data from multiple promises at once with jquery .when().apply()

Question

I am new to javascript. I have an array of promises that are for asynchronous Ajax calls using $.getJSON. The number of promises can vary. So to resolve them, I am using

$.when.apply($, promises).done(function(data) {

I am doing .apply because I don't know how many promises there are, so I give it an array of promises instead. The problem I am having is the data variable only returns data for the first promise. If I had two promises, I could do this

$.when.apply($, promises).done(function(firstData, secondData) {

But because the number of promises is unknown, I cannot setup the right arguments for the callback function in .done(). I want to get an array containing the resolved data for each Ajax call in the .done() callback if that is possible

Answer 1

This is where spread syntax can come in handy.

Try something like this

$.when(...promises).done((...results) => {
  // results is an array
})

This works by

1. Treating the promises array like individual function arguments

   $.when(promises[0], promises[1], ..., promises[promises.length - 1])
   

2. Combining the individual arguments for the .done() callback function into an array

---

For completeness, this is really one of those situations where you might not need jQuery. Modern browsers support Fetch and Promise.all as very good vanilla JS replacements for $.when and $.ajax

const getJson = async (url) => {
  const res = await fetch(url)
  if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`)
  return res.json()
}

Promise.all([ getJson(url1), getJson(url2) ]).then(results => {
  // results is an array
})

---

If you're one of those poor, unfortunate souls who still have to support Internet Exploder Explorer, you can use apply() and the arguments object

$.when.apply($, promises).done(function() {
  var results = arguments
})