Question

-2

Angular js foreach only returning last item in array

rated 0 times [ 5] [ 7] / answers: 1 / hits: 35583 / 10 Years ago, wed, september 17, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sandra

Add To Favorites

Follow

Total Points: 708

Total Questions: 100

Total Answers: 84

Location: Bosnia and Herzegovina

Member since Thu, Jun 24, 2021

3 Years ago

sandra questions

1 NestJS/TypeORM: Cannot read property 'createQueryBuilder' of undefined

Mon, Nov 16, 20, 00:00, 4 Years ago

1 How to pass an array in query parameter reactjs

Tue, Jun 30, 20, 00:00, 4 Years ago

1 Firebase popup signin popup-closed-by-user error

Sun, May 31, 20, 00:00, 4 Years ago

1 How to test a component with the < Router> tag inside of it?

Wed, May 20, 20, 00:00, 4 Years ago

1 How do I send an array with fetch? (Javascript)

Fri, May 31, 19, 00:00, 5 Years ago

View All

answered 10 Years ago rylee · Accepted Answer

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