CODEWITHSUNDEEP
jsonangularjs
Rajat Nigam
Rajat Nigam

Reputation: 271

Angular- Couldnot parse json response in front-end

I made an httpRequest fetch some items using following code:

factory.getBanners = function() {
    $http({
      method: 'GET',
      url: 'http://localhost:2100/v1/items/getBanners'
    }).then(function successCallback(response) {
      console.log(response);
      return response;
    });
  };

In controller I handled it as following:

store.controller('bannerCtrl', ['$scope', 'productService', function($scope, productService){
  $scope.init = function() {
    $scope.banners = productService.getBanners();
  }
  $scope.init();
}]);

In front end I tried to display data using 

<div ng-controller="bannerCtrl">
    <div data-ng-repeat="banner in banners">
        <li> {{banner.bannerAltText}} </li>
    </div>
</div>

But it doesn't display anything. Neither it gives any error on console. How can I resolve this issue. Here banners is an array whose each element contains bannerAltText.

Upvotes: 0

Views: 466

Answers (2)

LionC
LionC

Reputation: 3106

Your getBanners-function does not work the way you think it does. It returns nothing. The return statement in the then function only returns from that then-function, not from getBanners. The problem is that you are trying to use an asynchonous function in a synchronous way. Instead make getBanners return a promise:

factory.getBanners = function() {
    return $http({
        method: 'GET',
        url: 'http://localhost:2100/v1/items/getBanners'
    }).then(function successCallback(response) {
        return response.data;
    });
};

And use that promise in your controller:

$scope.init = function() {
    productService.getBanners().then(function(banners) {
        $scope.banners = banners;
    });
}
$scope.init();

Upvotes: 1

Simon H
Simon H

Reputation: 21005

A return in a in .then() will be a promise, rather than the data. here is a better way to construct your code

factory.getBanners = function() {
    return $http({
      method: 'GET',
      url: 'http://localhost:2100/v1/items/getBanners'
    });
  };

.

store.controller('bannerCtrl', ['$scope', 'productService', function($scope, productService){
  $scope.init = function() {
    productService.getBanners()
    .then(function(response) {$scope.banners = response.data});
  }
  $scope.init();
}]);

Upvotes: 0

Related Questions