CODEWITHSUNDEEP
javascriptjqueryajaxjson
Joel Z.
Joel Z.

Reputation: 573

Why is jQuery each not going through all JSON items from two functions using $.when

The json returns from the two ajax functions seem to download complete when I check with Chrome Network inspector. However the jQuery each is not going through all items of both json files. It only goes through the first three items of the json files. So that jQuery each only builds the movie titles of the first three movies.

If I use $.when with only one function it works and returns all items. I commented out the two areas that work as a single function.

jquery 1.11.0

Here is the javascript:

$(document).ready(function()
{
    var movieCollectionUrl = 'json/movie_collection.json';
    var movieFavoritesUrl = 'json/movie_favorites.json';
    var movieCollectionElement = $('#collection ul');
    var movieFavoritesElement = $('#favorites ul');

    function getList(url)
    {
        return $.ajax(
        {
            dataType: "json",
            type: "get",
            url: url
        });
    }

    function buildList(data, element)
    {
        $.each(data, function(i)
        {
            var title = data[0][i].title; 
            //var title = data[i].title; //this returns all items but only with a single function with $.when
            var html = '<li>' + title + '</li>';
            element.append(html);
        });
    }


    function myExecute(movieCollectionData, movieFavoritesData)
    {
        buildList(movieCollectionData, movieCollectionElement);
        buildList(movieFavoritesData, movieFavoritesElement);
    }

    /*
    function executeSingle(movieFavoritesData)
    {
        buildList(movieFavoritesData, movieFavoritesElement);
    }
    */

    function myFail()
    {
        alert("FAILED TO LOAD");
    }

    $.when(getList(movieCollectionUrl), getList(movieFavoritesUrl)).then(myExecute, myFail);
    //$.when(getList(movieFavoritesUrl)).then(executeSingle, myFail); //This one works. Using only one function here
}); //document ready

index.html

<!DOCTYPE HTML>
    <head>
        <title>Movies</title>
    </head>
    <body>
        <div id="favorites">
            <h2>Favorite Movies</h2>
            <ul></ul>
        </div>
        <div id="collection">
            <h2>Movie Collection</h2>
            <ul></ul>
        </div>
    </body>
</html>

movie_collection.json

[
{
    "title": "127 Hours",
    "poster": "http://slurm.trakt.us/images/posters_movies/6646.1.jpg"
},
{
    "title": "2012",
    "poster": "http://slurm.trakt.us/images/posters_movies/463.jpg"
},
{
    "title": "The 40 Year Old Virgin",
    "poster": "http://slurm.trakt.us/images/posters_movies/658.1.jpg"
},
{
    "title": "A Better Life",
    "poster": "http://slurm.trakt.us/images/posters_movies/182444.1.jpg"
},
{
    "title": "A Moment To Remember",
    "poster": "http://slurm.trakt.us/images/posters_movies/162086.jpg"
}]

movie_favorites.json

[
{
    "title": "A Seperation",
    "poster": "http://slurm.trakt.us/images/posters_movies/176861.2.jpg"
},
{
    "title": "Abraham Lincoln Vampire Hunter",
    "poster": "http://slurm.trakt.us/images/posters_movies/184657.2.jpg"
},
{
    "title": "The Adventures of Tin Tin",
    "poster": "http://slurm.trakt.us/images/posters_movies/13066.2.jpg"
},
{
    "title": "Agore",
    "poster": "http://slurm.trakt.us/images/posters_movies/223.jpg"
}]

Upvotes: 0

Views: 83

Answers (1)

Felix Kling
Felix Kling

Reputation: 816452

Have a look at the example of $.when in the documentation:

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
  // a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
  // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
  var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
  if ( /Whip It/.test( data ) ) {
    alert( "We got what we came for!" );
  }
});

As explained, the arguments passed to the callback function are arrays of the form [ data, statusText, jqXHR ]. The first element of the arrays contains the actual response. So you have to change your function to

function myExecute(movieCollectionData, movieFavoritesData)
{
    buildList(movieCollectionData[0], movieCollectionElement);
    buildList(movieFavoritesData[0], movieFavoritesElement);
}

The single case works because $.when doesn't create a new promise, it simply returns the one that $.ajax returns, so it doesn't aggregate the results of multiple promises.

Upvotes: 1

Related Questions