Angular js foreach only returning last item in array

Question

I'm trying to return each item object from a JSON and evaluate its value, with the angular.forEach(), but only the last item is returned. And due to that I can't perform any evaluation. Funny enough, if I do console.log(), it shows each item, one by one.

How can I get each item and evaluate them?

If you know of a better way, please teach me.

JS (angularjs):

angular.module('bLiApp')
  .controller('AddDataCtrl', ['$scope', 'DataService', function ($scope, DataService) {

    DataService.getItems().success(function(data) {

      $scope.items = data.category.items;

      angular.forEach($scope.items, function(item) {

        // This is where I'm having problem with return data...
        if (item.amount < 600) {
          $scope.amountchecker = 'low';
        } else if (item.amount >= 600 && item.amount <= 650) {
          $scope.amountchecker = 'average';
        } else if (item.amount > 650) {
          $scope.amountchecker = 'too high';
        }

      });
    });
  }]);

HTML (angularjs):

<div class="add-data" ng-controller="AddDataCtrl">
  <div class="data-box clearfix" ng-repeat="item in items">
    <article class="item">
      <p>{{amountchecker}}</p>
      <p><span class="month">{{ item.month.substring(0, 3) }}</span></p>
      <p class="cost">{{item.cost | currency:"&pound;"}}</p>
    </article>
  </div>
</div>

Many thanks

Don't you mean to do item.amountchecker = '' ? Because you're overwriting it everytime there. (and {{item.amountchecker}} in the html) — Goodzilla
– Goodzilla, Commented Sep 17, 2014 at 9:15
@Goodzilla, no I was testing something. it can be ignored. So do you have any idea what's going on and how I can fix this? — Shaoz
– Shaoz, Commented Sep 17, 2014 at 9:36
@ThomasP1988, Sorry I'm just starting to learning Angular. What do you mean with $index? — Shaoz
– Shaoz, Commented Sep 17, 2014 at 9:37
@Shaoz That's in case you have duplicate items, see the documentation. Could you show us the array in question ? — Goodzilla
– Goodzilla, Commented Sep 17, 2014 at 9:39

enguerranws · Accepted Answer · 2014-09-17 09:59:06Z

5

You actually don't need a forEach loop to achieve that :

<div class="add-data" ng-controller="AddDataCtrl">

 <div class="data-box clearfix" ng-repeat="item in items">
    <article class="item">
      <p>
         <span ng-if="item.amount < 600">Low</span>
         <span ng-if="item.amount >= 600 && <= 650">Average</span>
         <span ng-if="item.amount < 650">Too high</span>
      </p>
      <p><span class="month">{{ item.month.substring(0, 3) }}</span></p>
      <p class="cost">{{item.cost | currency:"&pound;"}}</p>
    </article>
  </div>
</div>

That should do the job. Note that this will only display the amount, if you want to change it in the model (if you have to send back data you just evaluated), you should change the data in the controller :

  angular.forEach($scope.items, function(item) {
    item.amountChecker; // declare a new property for each item in $scope.items
    // then we set the value for each item
    if (item.amount < 600) {
      item.amountChecker = 'low';
    } else if (item.amount >= 600 && item.amount <= 650) {
      item.amountChecker = 'average';
    } else if (item.amount > 650) {
      item.amountChecker = 'too high';
    }

  });

This should add a new line in your $scope.items object, where amountChecker will be assigned to each item. Then, in your ng-repeat, you can also display that value : item.amountChecker.

This time, it will call the property amountChecker of each items instead of the last value stored in $scope.amountchecker.

Note that Goodzilla actually answered in comment, in a shorter way :)

edited Sep 17, 2014 at 9:59

answered Sep 17, 2014 at 9:48

enguerranws

8,2338 gold badges53 silver badges101 bronze badges

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

4 Comments

Shaoz Over a year ago

Aah, I see. Thanks for this. I just wanted to do all evaluation in the controller instead of the view. So I don't have to populate the view with tags. But is there a way to do that in JS, though.

Shaoz Over a year ago

Thanks for your answer and help. It work fine now and I understand what you did. Many thanks.

Goodzilla Over a year ago

The best solution would probably be a filter though.

Shaoz Over a year ago

@Goodzilla, yeah I was thinking the same.

Chris Peacock · Accepted Answer · 2014-09-17 09:51:02Z

1

You appear to be overwriting $scope.amountchecker in every iteration of the loop through $scope.items. If $scope.items had an item with amount of 500 followed by one with amount of 650, $scope.amountchecker would end up being set to 'average' as 650 is the amount of the last item encountered in the loop.

The solution depends on whether you actually want amountchecker to be based on all items or a single item. If the latter, you would change your lines such as:

$scope.amountchecker = 'low';

To

item.amountchecker = 'low';

answered Sep 17, 2014 at 9:51

Chris Peacock

4,7563 gold badges31 silver badges27 bronze badges

1 Comment

Chris Peacock Over a year ago

No problem! I've just seen that others actually answered this in the comments first...

Collectives™ on Stack Overflow

Angular js foreach only returning last item in array

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related