Why data from server doesn't display in AngularJS application?

Question

I have a simple AngularJS application, i have the page with albums at the Albums.html page, after click to album i redirect to AlbumPhotos.html and send $http.post request to server and get all photos of album from server:

//Empty Photo Array
$scope.AllPhotosOfAlbumArray = [];
// Get All Photos Of Album
$scope.getAlbumPhotos = function (albumId) {
    console.log(albumId);
    logicOfMyApp.getAllPhotosOfALmubFromSrverFunc(albumId).then(function (photos) {
        $scope.AllPhotosOfAlbumArray = photos;
        console.log($scope.AllPhotosOfAlbumArray);
    });
};

getAllPhotosOfALmubFromSrverFunc() method code:

getAllPhotosOfALmubFromSrverFunc: function(albumId)
    {
        var photosPromise = $q.defer();
        var req = {
            method: 'POST',
            url: '/api/getPhotos',
            data: albumId
        };
        $http(req).success(function(res) {
           return photosPromise.resolve(res)
        }).error(function(error){
            return photosPromise.reject(error);
        });
        
        return photosPromise.promise;
     }

I get data from server:

But when i trying display data from $scope.AllPhotosOfAlbumArray use ng-repeat directive at the page:

<!--Display all Photos Of Album-->
<div ng-repeat="photo in AllPhotosOfAlbumArray">
    {{photo}}
</div>

it display nothing.

Maybe somebody knows how i can resolve it ?

Thanks for your answers!

Try add some value to photo array and check if they will show — Geding
– Geding, Commented Aug 21, 2016 at 8:15
@Geding I added static data like this [1,2,3,4] and it displays. — Uladz Kha
– Uladz Kha, Commented Aug 21, 2016 at 8:16
Can you check if that ng-repeat is working with data from server adding inside some text (and check if it display)? — Geding
– Geding, Commented Aug 21, 2016 at 8:18

miqe · Accepted Answer · 2016-08-21 09:51:00Z

1

Something i noticed in your code is return photosPromise.resolve(res) and return photosPromise.reject(error); you don't need to use return on those lines because that is not the way to use $q in angularjs. here is a snippet from $q documentation.

function asyncGreet(name) {
  var deferred = $q.defer();

  setTimeout(function() {
    deferred.notify('About to greet ' + name + '.');

    if (okToGreet(name)) {
      deferred.resolve('Hello, ' + name + '!');
    } else {
      deferred.reject('Greeting ' + name + ' is not allowed.');
    }
  }, 1000);

  return deferred.promise;
}

answered Aug 21, 2016 at 9:51

miqe

3,3893 gold badges31 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Uladz Kha Over a year ago

I change my method like you, it return photos, but it still doesn't display, I use another way to resolve it, I using a data-ng-init directive, and get data after load the page.

Collectives™ on Stack Overflow

Why data from server doesn't display in AngularJS application?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related