ng Repeat on a list populated in a $http post shows empty html

Question

I'm really newbie on angularjs, I'm trying to display a list of products so I call a service with $http and in the success function populate the $scope. All seems works, the $scope.list contains the products but nothing is displayed

I already had a look at this Angularjs $http.get().then and binding to a list and everything looks the same except the "then" function that in my case should be the success function, I suppose. (because if I add that function I get $http(...).then(...).error is not a function).

<div ng-app="myApp" ng-controller="myCtrl">
 <ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="item in $scope.list as results">
    item {{$index + 1}}:
    {{item.Brand}} 
  </li>
  <li class="animate-repeat" ng-if="results.length == 0">
    <strong>No results found...</strong>
  </li>
</ul>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {
   var url = "http://localhost:50083/service.asmx/StylesMock";
   $scope.list = new Array();

   $http({method: 'POST', url: url, headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }})
   .success(function(xmlString){
     var parser = new DOMParser();
     var xml = parser.parseFromString(xmlString, "text/xml");
     jsonData = xmlToJson(xml);
     mapToScope($scope, jsonData);
   })
   .error(function(data, status, headers, config) { alert("error"); });;

  function mapToScope($scope, data){
    angular.forEach(data.ArrayOfStyleData.StyleData, function(value, key) {

      $scope.list.push({
        Brand : value.Style.Brand,
        Name : value.Style.Name,
        Image : value.Style.Image,
        Price : value.Style.StylePrice
      });
    });
  }
});

Any idea? Is there a way to understand where the problem is? the console doesn't display errors

try replacing `$scope.list` by `list`, now angular is looking for a `$scope.list` property on `$scope` itself — Robin-Hoodie, Jul 29 '15 at 09:50
As @NexusDuck said, change ng-repeat="item in $scope.list as results" to ng-repeat="item in list as results" — Emanuel Ralha, Jul 29 '15 at 09:53

score 1 · Answer 1 · answered Jul 29 '15 at 09:52

1

The problem is with your HTML remove $scope because it is already in a angular directive

ng-repeat=item in list

<div ng-app="myApp" ng-controller="myCtrl">
 <ul class="example-animate-container">
  <li class="animate-repeat" ng-repeat="item in list as results">
    item {{$index + 1}}:
    {{item.Brand}} 
  </li>
  <li class="animate-repeat" ng-if="results.length == 0">
    <strong>No results found...</strong>
  </li>
</ul>

answered Jul 29 '15 at 09:52

Shubham Nigam

3,844
19
32

Thanks man, works now. Is there a way to understand where the problem was? the console didn't display errors – DevT Jul 29 '15 at 09:57
1

I told you in my comment, "now angular is looking for a $scope.list property on $scope itself" – Robin-Hoodie Jul 29 '15 at 10:00
@NexusDuck Yes thanks, but I meant why the console doesn't display errors? how I can find this kind of errors whether they don't appear on the console? – DevT Jul 29 '15 at 10:03
1

@DevT Angular is "forgiving" in its error handling, when angular can not find `$scope.list` as a property it will simply ignore it instead of throwing an error. While this is convenient in a lot of cases, in your case it would have helped. Anyway, this is default angular behaviour, you can alter it but that would take a lot of knowledge of the framework. – Robin-Hoodie Jul 29 '15 at 10:05
@NexusDuck Thanks a lot. I accepted the first correct answer – DevT Jul 29 '15 at 10:08
@DevT You're welcome. Although it's your own choice I can't help but notice that you accepted Shubham's answer when he just copy-pasted my answer from the comment I posted before him – Robin-Hoodie Jul 29 '15 at 10:09

score 1 · Accepted Answer · answered Jul 29 '15 at 10:01

As I answered in my comment:

Replace $scope.list by list. By default, angular will look on the relevant controller $scope itself when referenced in your view.

So by specifying $scope.list in your view angular is looking for $scope.$scope.list in your controller

ng Repeat on a list populated in a $http post shows empty html

2 Answers2