Sequential execution in Javascript or Angular

0

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, that's when I put a banzé when I put console.log () to see what's going on. I need a way to make this work, after running the getPhotosFromAlbum method I'll get the first photo of the $ scope.photos array and put the url of it in the album, except that, after running the getPhotosFromAlbum method the photos array is empty being that it was set in these methods.

I hope you did not get too confused, if anyone can help me thank you.

    
asked by anonymous 25.01.2017 / 13:48

1 answer

1

As you use a request for the server, your console.log calls will automatically merge. But this is not necessarily wrong, since Javascript has asynchronous nature. Your error is in using the $scope.photos variable 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 to the 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;
    
26.01.2017 / 13:38