Problem with fetch

Hello community,

We are trying to use the the movie db API and in order to get all the information we need we have to make 2-3 separate requests. We want to store all the required elements from the JSON replies to a single observable. The first fetch returns a JSON like this

"page":1,"results":[{"poster_path":"\/5N20rQURev5CNDcMjHVUZhpoCNC.jpg","adult":false,"overview":"Following the events of Age of Ultron, the collective governments of the world pass an act designed to regulate all superhuman activity. This polarizes opinion amongst the Avengers, causing two factions to side with Iron Man or Captain America, which causes an epic battle between former allies.","release_date":"2016-04-27","genre_ids":[28,878,53],"id":271110,"original_title":"Captain America: Civil War","original_language":"en","title":"Captain America: Civil War","backdrop_path":"\/m5O3SZvQ6EgD5XXXLPIP1wLppeW.jpg","popularity":82.947294,"vote_count":554,"video":false,"vote_average":6.85},{...}

Then we want for each movie that exists in this reply to fetch some additional information. We use a nested fetch inside the first fetch and then we add the additional information needed to the observable.It looks like the first fetch is executed ignoring the nested one (lines of code that are below the nested fetch but still inside the first fetch are executed) and then the nested is executed. The reason that we used nested fetch calls is that the observable is empty if used outside the fetch block.

Code (movies observable is global):

            var j=0;

            fetch(movie)
                .then(function(response) { return response.json(); })
                .then(function(responseObject) {
                    movies.value = responseObject;
                    for(var i=0;i<movies.value.results.length;i++)
                    {
                        movies.value.results[i].poster_path = poster+movies.value.results[i].poster_path;

                        var info = //URL ;
                        fetch(info)
                            .then(function(response) { return response.json(); })
                            .then(function(responseObject) {
                                moreInfo.value = responseObject;

                                if(j < movies.value.results.length)
                                {
                                    movies.value.results[j].runtime = moreInfo.value.runtime;
                                    j++;
                                }
                            });
                    }
                });

fetch is asynchronous, so it is supposed to do that. I didn’t see all your code, but I guess something like this is what you want (this can be done in many ways):


var poster = "";
var movie_url ="<movieurl>";
var fetch_more_url = "<fetchmoreurl>";

var fetchJson = function(url) {
    return fetch(url).then(function(response) { return response.json(); });
};

var createMovieAsync = function(jsonMovie, index) {
    var moreinfoUrl = fetch_more_url + jsonMovie.id;
    return fetchJson(moreinfoUrl).then(function(moreinfo) {
        return {
            poster_path: poster + jsonMovie.poster_path,
            runtime: moreinfo.runtime
        };
    });
};

var moviesObs = Observable();

fetchJson(movie_url)
    .then(function(responseObject) { return responseObject.results.map(createMovieAsync); })
    .then(function(promises) { return Promise.all(promises); }) // Wait for all movies to fetch more info
    .then(function(movies) {
        movies.map(function(m) {
            moviesObs.add(m) // Add to observable
        });
    })
    .catch(function(e) { console.log("error :("); });

module.exports = {
    movieList: moviesObs
};

Works like a charm!

P.S. sorry for the veryyyy late response :slight_smile: