title: Two methods of looping through Ajax requests for jQuery Then When - which to use?
body: <p>I've got a deceptively simple blog project in the works, where I'm trying to bring together <a href="http://isotope.metafizzy.co/" rel="nofollow noreferrer">Isotope Jquery</a> (for layout/filtering/sorting), <a href="https://github.com/paulirish/infinite-scroll" rel="nofollow noreferrer">Infinite Scroll</a>, and dynamic loading of all blog excerpts via Ajax (so filtering and sorting is applied to all excerpts before the user scrolls down the page (after which time they're loaded into the dom and then accessible)). </p>
  
  <p>This question primarily deals with getting the blog post excerpt data via Ajax, to then be passed into Isotope filtering code. I'm not sure of the best way to do this, but am currently trying to loop through each page (of blog posts excerpts) with an ajax request and then access the data as one whole. </p>
  
  <p>I've come across two different methods to loop through the ajax requests, each using <code>then when</code> jquery statements. The first is using the method give in <a href="https://stackoverflow.com/a/18425082/1971662">this SO answer</a>, the other is simply putting the entire <code>then when</code> statement inside of an <code>$.each</code> statement. </p>
  
  <p><strong>Method 1:</strong></p>
  
  <pre><code>  var pageCount = 15;
    var pageCountArray = [];
    for (var i = 1; i != pageCount; ++i) pageCountArray.push(i);
  
    var deferreds = [];
    $(pageCountArray).each(function() {
      var pageNumber = this;
        deferreds.push(
          $.get('/page/' + pageNumber)
        )
  
      $.when.apply($, deferreds)
        .then(function(data){
          console.log(data); 
          // this outputs data as a string from the first page, then a list of objects
          console.log(typeof(data));
          // string
          // 13 - object
      });
    });
  </code></pre>
  
  <p><em>Slight aside: Any ideas as to why this is outputting one string and then objects?</em></p>
  
  <p><strong>Method 2:</strong></p>
  
  <pre><code>  var pageCount = 15;
    var pageCountArray = [];
    for (var i = 1; i != pageCount; ++i) pageCountArray.push(i);
  
    $(pageCountArray).each(function(data) {
      var pageNumber = this;
        $.when(
          $.get('/page/' + pageNumber)
        ).then(function() {
          console.log(data);
          // this outputs 14 strings of data 
          console.log(typeof(data));
          // 14 - string
        })
    });
  </code></pre>
  
  <p>I haven't yet figured out how to incorporate the Ajaxed data into my Isotope filter function, but I think I'll need to parse this into HTML first. Still getting my footing with javascript... in this case is one of these data types (objects vs strings) easier to parse into HTML? I suppose that's the key to my answer? </p>
  
  <p>Much obliged for insights. </p>
  
  <p><strong>PS:</strong> Bonus points for anyone who might know of a better way to achieve this in a different way that somehow dovetails into Isotope/Infinite Scroll nicely (perhaps in a way that's more intended to play nice with these plugins... I've been unsuccessful in my searching).</p>
  
  <p><strong>PPS:</strong> The second method <em>feels</em> much cleaner... anyone know of a reason that it's not a good approach (using <code>when then</code> inside of an <code>.each</code> loop)?</p>