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

Solution 1

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 :)

Solution 2

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';