Angular- Couldnot parse json response in front-end

Question

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.

try response.data. also, your factory isn't returning anything, only your .then() is. — Claies
– Claies, Commented Oct 8, 2015 at 11:32
If you are getting data in console, expand it and see the structure of data. — Ved
– Ved, Commented Oct 8, 2015 at 11:33
yes i expanded the data and i can see under data object, my required array is there. So i returned response.data. But still it can't parse — Rajat Nigam
– Rajat Nigam, Commented Oct 8, 2015 at 11:36
Can you update your question with data you got in console. Expand it and copy paste here. — Ved
– Ved, Commented Oct 8, 2015 at 11:37
@Ved The data is not the issue, the structure of the code is wrong (as both answers to the question point out) — LionC
– LionC, Commented Oct 8, 2015 at 11:59

LionC · Accepted Answer · 2015-10-08 11:38:28Z

1

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();

answered Oct 8, 2015 at 11:38

LionC

3,1061 gold badge24 silver badges31 bronze badges

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

1 Comment

LionC Over a year ago

No problem, glad I could help

Simon H · Accepted Answer · 2015-10-08 11:37:32Z

0

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();
}]);

answered Oct 8, 2015 at 11:37

Simon H

21.2k14 gold badges84 silver badges144 bronze badges

Collectives™ on Stack Overflow

Angular- Couldnot parse json response in front-end

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related