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
– Harris, Commented Mar 25, 2016 at 19:39

Community · Accepted Answer · 2017-05-23 11:33:16Z

2

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">

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Mar 25, 2016 at 21:45

Ealon

4,9389 gold badges38 silver badges68 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:34:59Z

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.

Zack Herbert · Accepted Answer · 2016-03-29 13:59:13Z

0

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.

answered Mar 29, 2016 at 13:59

Zack Herbert

9601 gold badge16 silver badges41 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related