0

I've been searching and trying so many variations, with no luck.

I have an array of users:

var arr = ['tom', 'sally', 'jill', 'sam', 'john'];

I am wanting to pass these users into 2 APIs (same site, different URLs, for different data sets) with $.ajax:

function getStatus1() {
  return $.each(arr, function (index, value) {
    arrStatus.push($.ajax({
        url: 'https://some/url',
        dataType: 'json'
      })
      .always(function (response) {
        console.log('from getStatus1');
      }));
  });
}

function getStatus2() {
  return $.each(arr, function (index, value) {
    arrStatus.push($.ajax({
        url: 'https://some/url',
        dataType: 'json'
      })
      .always(function (response) {
        console.log('from getStatus2');
      }));
  });
}

$.when(getStatus1(), getStatus2()).then(function () {
  console.log('after getStatuses');
});

No matter what I try, I'm always getting 'after getStatuses' first, which I gather is because I'm not returning promises in my functions... but I don't know why this is the case!!

This article was the closest I got to my situation, but it doesn't deal with using $.each or arrays... :( jQuery Promise then not working after AJAX

I would really appreciate any help / light that anyone can shed on my problem.

Thank you!

edit Here's a Plnkr to demonstrate my ajax woes: https://plnkr.co/edit/jRAAjXX4zFprUbx1KPlN?p=preview

Thanks for all the replies, and I really hope there's a solution!

Community
  • 1
  • 1
dm4000
  • 23
  • 6
  • What about to try to push to the array inside the success ajax response callback? – RPichioli Feb 15 '16 at 11:56
  • your when... then is working but ithink issue in your ajax call – JavidRathod Feb 15 '16 at 12:04
  • I've tried that too: function getDetails() { return $.each(arr, function (index, value) { arrDetails.push($.ajax({ url: 'https://some/url/' + value, dataType: 'json', success: function (response) { console.log('from getDetails'); } })); }); } ... gives the same result :( – dm4000 Feb 15 '16 at 12:12
  • `$.each` doesn't return a value... – Alnitak Feb 15 '16 at 12:19

1 Answers1

1

$.each doesn't return a value, so there's no point returning one.

Instead of using $.each, use Array.prototype.map (there's no equivalent in jQuery) and return the promise inside the callback, e.g.

function getStatus1() {
  return arr.map(function(value, index) {
      return $.ajax({
          url: 'https://some/url',
          dataType: 'json'
      });
  });
}

However, note that you've now (once you've fixed both functions) got two arrays of promises. $.when() won't handle the nesting, unless you do:

$.when($.when.apply($, getStatus1()), $.when.apply($, getStatus2()).then(...)

Alternatively arrange for the two functions to return a single promise from their arrays:

function getStatus1() {
    return $.when.apply($, arr.map(...))
}
Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • Thank you for this reply! I spent a lot of time using this to try to get my code to work... without success. I ended up creating a Plnkr https://plnkr.co/edit/jRAAjXX4zFprUbx1KPlN?p=preview to demonstrate my ajax woes... The main problem seems to be the array – if the array produces no 'fails' in the ajax call, then the 'when' will output... but if the array produces a 'fail', then the 'when' doesn't output. I feel like I'm learning a lot, but also getting somewhere! – dm4000 Feb 15 '16 at 21:33
  • @dm400 if it solved your problem the usual practise here is to "accept' the answer :) – Alnitak Feb 15 '16 at 21:34
  • thanks – I'm still not able to get the 'when' output to display after the 'getStatus' output – when the array generates a 'fail'... I ended up having to manipulate the array inside the 'always' method. Anyway, yep – answer accepted now – thanks for your help. – dm4000 Feb 16 '16 at 00:44
  • @dm4000 that's the document behavior of `$.when` - if one fails, the `$.when` promise does too. – Alnitak Feb 16 '16 at 08:52
  • ah! that helps – makes a lot of sense why the code behaved the way it did. thanks! – dm4000 Feb 17 '16 at 21:42