Ng-repeat of Objects in Array doesn't work

Question

I have an Array of Objects retrieved from server. The Query works, but when I do the ng-repeat in the html view, it doesn't work, it doesn't show anything. Why? This is the js code:

$scope.companyList = [];

$scope.getCompanyList = function() {
    $scope.companyList.length = 0;

    CompanyListSrv.getCompanyListDetail(function (companyListDetail) {
        if (companyListDetail) {
            $scope.companyList = companyListDetail;
        }
    });
};

$scope.getCompanyList();

HTML code:

   <tr ng-repeat="company in companyList">
     <td>{{ company.name }}</td>
     <td>{{ company.email }}</td> 
   </tr>

This is the companyListDetail Array (response from server):

companyListDetail: Array[2]
  0: Object
  1: Object
  length: 2

This is the 0: Object :

email: "[email protected]"
name: "Compant 2"

In console I have no error, and in html page of browser I have this:

<!-- ngRepeat: company in companyList -->

Cant see obvios errors. Try check next: 1. How do you use async call? Using $http? Try to put $timeout(function(){$scope.companyList = companyListDetail;}) ; 2. Put console.log(companyListDetail) just after function (companyListDetail) { — Drag13
– Drag13, Commented Jun 10, 2016 at 9:16
Put console.log($scope.companyList) after calling the function $scope.getCompanyList() and check whether the data is available or not. The problem may be data (companyList) is not available for ng-repeat — Dinesh Ram
– Dinesh Ram, Commented Jun 10, 2016 at 9:20
check $scope.companyList = companyListDetail; by console.log($scope.companyList) as it is having same array of objects or not. — Rohìt Jíndal
– Rohìt Jíndal, Commented Jun 10, 2016 at 9:23
@Vitalii I can see the this log: [Object, Object] 0: Object 1: Object — panagulis72
– panagulis72, Commented Jun 10, 2016 at 9:24

Deblaton Jean-Philippe · Accepted Answer · 2016-06-10 09:38:09Z

1

$scope.companyList.length = 0; // This line is good, it empties the array without modifying the reference

CompanyListSrv.getCompanyListDetail(function (companyListDetail) {
    if (companyListDetail) {
        $scope.companyList = companyListDetail; // this line is bad, you assign $scope.companyList to a new reference
    } 
});

The issue here, is that angular $watch mechanism checks if the object has changed but has only remembered his first reference.

The reason why console.log() works is because you give this function the new reference of your object.

what you can do is the following :

if (companyListDetail) {
     for (var i = 0; i< companyListDetail; i++){
         $scope.companyList.push(companyListDetail[i]);
     }
}

answered Jun 10, 2016 at 9:38

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

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

13 Comments

vp_arth Over a year ago

It's watched as $scopes property. I guess simple $scope.$apply() will fix it.

Deblaton Jean-Philippe Over a year ago

@vp_arth $scope.$apply() will work but will trigger a complete check of all $watches of the app. It lowers the perfs, and can potentially throw an exception if an apply was already in progress. You should never use $apply!

panagulis72 Over a year ago

Deblaton thank you, but it doesn't work yet... I think that it's because I'm doing asyn calling, because I'm using couchdb

Deblaton Jean-Philippe Over a year ago

an async call should return a promise.

panagulis72 Over a year ago

So I will return two elements, companyListDetail and the Promise?

|

Sidhant Chopra · Accepted Answer · 2016-06-10 09:59:02Z

1

Try this it will work :

You forgot to add <table> tag in Html.

Html :

<div ng-app ng-controller="LoginController">
<table>
<tr ng-repeat="company in companyList">
     <td>{{ company.name }}</td>
     <td>{{ company.email }}</td> 
   </tr>
</table>

</div>

Script :

function LoginController($scope) {
  $scope.companyList = [];

$scope.getCompanyList = function() {
    $scope.companyList.length = 0;
    var companyListDetail = [{
  email: "[email protected]",
  name: "Sidhant"
  },
  {
  email: "[email protected]",
  name: "Chopper"
  }]

            $scope.companyList = companyListDetail;
            console.log($scope.companyList);
};

$scope.getCompanyList();
}

Working demo : https://jsfiddle.net/Lt7aP/2864/

answered Jun 10, 2016 at 9:59

Sidhant Chopra

112 bronze badges

1 Comment

panagulis72 Over a year ago

In my html I wrote <table> correctly, I've just picked a piece of my code! The real problem is that there are async call

Collectives™ on Stack Overflow

Ng-repeat of Objects in Array doesn't work

2 Answers 2

13 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related