Sequential execution in Javascript or Angularjs

Question

I am creating a controller for an Angularjs application, in this controller I will have 3 methods that must be executed in sequence.

EXAMPLE:

$scope.albums = [];
$scope.photos = [];

//Metodo que vai setar o array de albums e chamar a função para buscar as fotos de cada album.
function getAlbums() {
    var album = null;
    resource = $resource(url_albums);
    resource.get().$promise.then(function(response) {
        $scope.albums = response.photosets.photoset;
        for (i = 0; i < $scope.albums.length; i++) {
            album = $scope.albums[i];
            getPhotosFromAlbum(album.id);
            //vou pegar a primeira foto e colocar a url dela no album.
        }
    }, function(promise) {
        alert("Ops parece que um erro inesperado ocorreu o_0!");
        console.log(promise);
    });
}

//Seta o array de photos e chama método ara adicionar URL em cada foto.
function getPhotosFromAlbum(album_id) {
    var photos = [];
    url_photos = url_photos.replace('{album_id}', album_id);
    resource = $resource(url_photos);
    resource.get().$promise.then(function(response) {
        $scope.photos = response.photoset.photo;
        addPhotoUrl();
    }, function(promise) {
        alert("Ops parece que um erro inesperado ocorreu o_0!");
        console.log(promise);
    });
}

//Adiciona a url no Json da photo e devolve para o array na mesma posição que estava.
function addPhotoUrl() {
    var photo = null;
    for (i = 0; i < $scope.photos.length; i++) {
        photo = $scope.photos[i];
        photo = Object.defineProperty(photo, 'photo_url:', {
            value: 'http://farm' +
                photo.farm +
                '.staticflickr.com/' +
                photo.server +
                '/' +
                photo.id +
                '_' +
                photo.secret +
                '_b.jpg'
        });
        $scope.photos[i] = photo;
    }
}

I need these guys to run in sequence, running today it becomes a Catch when I put the console.log() to see what’s going on. I need a way to make it work, after running the getPhotosFromAlbum method I’ll take the first photo from the $Scope.photos array and put its url in the album, only, after executing the getPhotosFromAlbum method the photos array is empty and it was set in those methods.

I hope you haven’t been too confused, if any can help me thank you.

Answer 1

How you use a request to the server, automatically your calls from console.log will be mixed. But this is not necessarily wrong, since the Javascript is asynchronous in nature. Your error is in using the variable $scope.photos in all interactions. If you change it to an array your code will work:

In function getPhotosFromAlbum:

$scope.photos[album_id] = response.photoset.photo;

Add the parameter album_id in function addPhotoUrl:

function addPhotoUrl(album_id) { ...

And change the following lines:

for (i = 0; i < $scope.photos[album_id].length; i++) {
    photo = $scope.photos[album_id][i];
    ...
    $scope.photos[album_id][i] = photo;