Wait for promises inside loop before return

Question

I got some problems, to getting my code to do as i want.

I want to loop through all my newly created object from the movieList array, once the outer "getJSON" is done. But i can see that the array is empty when i loop through it.

Is there anyway to get this solution to work?

   var url = "https://api.themoviedb.org/3/movie/popular?api_key=2c2a6a5ed606126f48db4cdbca91c0f0&language=en-US&page=1";
   var genreUrl = "https://api.themoviedb.org/3/genre/movie/list?api_key=2c2a6a5ed606126f48db4cdbca91c0f0&language=en-US";

$.getJSON(url).then(function(movies){
            var movieList = [];

       movies.results.forEach(function(movie){

            /* Get the genere names for single movie */
           $.getJSON(genreUrl).then(function(genresHolder){
                var genreNames = [];

               //Pushes some info to the array

                return genreNames;
            }).then(function(genres){
               movieList.push(new Movie(movie.id,movie.original_title,genres,movie.poster_path,movie.vote_count,movie.vote_average,movie.release_date));
           })
            counter++;
        })
          return movieList;

   }).then(function (movieList){

       movieList.forEach(function(movie){
           //Appending each movie to html page
       }) 
   }).catch(function(err){
       console.log(err)
   })

Answer 1

Well, without more specifications in what getJSON is doing, it is difficult to say. But uour code should work. BUT most probably you are resolving getJSON without giving back the result from the url.

In a promise you can simply resolve() or resolve(value), whatever is passed in the call will go to the then(...) function.

I cannot see other obvious error, in this async calls then will be called ONLY after the promise is resolves.