current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite

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

share|improve this question
    
can you try to add "track by $index" in ng repeat ? –  ThomasP1988 Sep 17 '14 at 9:14
    
Don't you mean to do item.amountchecker = '' ? Because you're overwriting it everytime there. (and {{item.amountchecker}} in the html) –  Goodzilla Sep 17 '14 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 Sep 17 '14 at 9:36
    
@ThomasP1988, Sorry I'm just starting to learning Angular. What do you mean with $index? –  Shaoz Sep 17 '14 at 9:37
    
@Shaoz That's in case you have duplicate items, see the documentation. Could you show us the array in question ? –  Goodzilla Sep 17 '14 at 9:39

2 Answers 2

up vote 2 down vote accepted

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

share|improve this answer
    
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 Sep 17 '14 at 9:50
    
I edited my post, ask me if you don't understand. –  enguerranws Sep 17 '14 at 9:56
    
Thanks for your answer and help. It work fine now and I understand what you did. Many thanks. –  Shaoz Sep 17 '14 at 10:01
    
You're welcome :) –  enguerranws Sep 17 '14 at 10:25
1  
The best solution would probably be a filter though. –  Goodzilla Sep 17 '14 at 10:59
up vote 1 down vote

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';
share|improve this answer
    
Thanks for your response and your help. –  Shaoz Sep 17 '14 at 10:20
    
No problem! I've just seen that others actually answered this in the comments first... –  Chris Peacock Sep 17 '14 at 10:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.