using ng-repeat to populate table rows with data from array

Question

I have a JS function called current_item.get_user_history() that returns an array , by making and API call, that looks something along the lines of this:

things[0]:
 thing_id: 5
 user_id: 23
 paddle_no: 1234
 item_id: 893
 price: 5000

things[1]:
 thing_id: 4
 user_id: 67
 paddle_no: 6743
 item_id: 893
 price: 4500

... and so on

I want to be able to take data from this array to populate a table using an ng-repeat.

<div class="bid_history">
      <table>
        <tr>
          <th>
            Column 1
          </th>
          <th>
            Column 2
          </th>
          <th>
            Column 3
          </th>
        </tr>
        <tr ng-repeat="thing in current_item.get_user_history() track by thing.id">
        {{thing.user_id}} {{thing.price}}
        </tr>

      </table>
  </div>

For some reason nothing gets rendered, and it seems to do a lot of repeating because I get an unstoppable number of errors in the chrome console. Any help is appreciated to explain exactly how one uses ng-repeat.

It's typically recommended not to iterate over the results of a function, but to instead use the function to assign to a scope variable, then iterate over that. — Harris, Mar 25 '16 at 19:39

score 2 · Answer 1 · edited May 23 '17 at 11:33

You cannot use a function that triggers $digest() (like $http, $timeout) in ng-repeat. It causes infinite $digest() loop.

There are explanations:

https://github.com/angular/angular.js/issues/705 or angular Infinite $digest Loop in ng-repeat.

And I made the same mistake before :)

Infinite loop when ng-repeat/ng-class calls a function which calls $http

You have to save current_item.get_user_history() data first and then use ng-repeat to call the data.

scope.things= urrent_item.get_user_history();

<tr ng-repeat="thing in things track by thing.id">

score 0 · Answer 2 · edited May 23 '17 at 12:34

Short Answer Don't call a function on ngRepeat for return items. Store the item array on a property in the scope.

$scope.user_history = current_item.get_user_history();

If in fact you really need to do this you can fix it with one of the following:

Do not create new object on every current_item.get_user_history() call.
If you need to create new objects you can add hashKey method for them. See this topic for examples.

Medium Answer You generally do not want to iterate over a function in ng-repeat. The reason is that current_item.get_user_history() returns an array with new object. This object does not have a hashKey and does not exist in ngRepeat cache. So ngRepeat on each watch.get generates new scope for it with new watch for {{thing.id}}. This watch on first watch.get() has watch.last == initWatchVal. So then watch.get() != watch.last. So then $digest starts a new traverse. Then ngRepeat creates a new scope with a new watch and so on. Then after 10 traverses you will get an error.

Long Answer Check out this post for a very well done explanation of how this works.

score 0 · Accepted Answer · answered Mar 29 '16 at 13:59

The problem was that digest cycle was returning a promise and I had to turn it into an object instead.

I was originally doing this:

my_api.get_user_history(self.id);

and had to add this to that line:

.then(function(data){self.user_history = data});

Part of the problem was also what @Ealon mentioned as well. I also decided to store it in a local variable instead of having the result of a function returned. I posted this answer because each of the above answer were all valid pieces that I needed to consider and put together to fix my problem. Thank you all for your help and guidance.

using ng-repeat to populate table rows with data from array

3 Answers3