count each item in an array using Angularjs

Question

I wanna achieve one function using AngularJs, like this , each time click one of ingredient the selected list have changed and add one more ingredient and show the number, if repeat to click one ingredient just change the amount of this ingredient

 here is my html
<div ng-app="myApp" ng-controller="addIngredientCtrl">
    <div class="ingredient-list">
        <h4>INGREDIENT:</h4>
        <ul ng-repeat="items in item.recipe.IngredientMapping">
            <li class="ingredient-list-style">
            <img src="http://164.132.196.117/chop_dev/api/AngularJs/images/plus.png" class="plus-size" ng-click="addIngredient(items.Ingredient.name)">
            {{items.quantity}} &nbsp; {{items.Unit.name}} &nbsp;{{items.Ingredient.name}}
            </li>
        </ul>
    </div>
    <div class="selected-list-box">
        <div class="selected-list">
            <h4>Selected List</h4>
            <div>
            <ul ng-repeat="selectedItem in selectedItem track by $index">
                <li>
                    {{selectedItem}} 
                    <li ng-repeat="(c, n) in results"> {{c}} shows {{n}} times</li>
                </li>
            </ul>

            </div>
        </div>

    </div>

here is my js

 myApp.controller('addIngredientCtrl', function($scope) {

$scope.selectedItem=Array();
$scope.addIngredient= function(param){

    $scope.selectedItem.push(param);

    console.log($scope.selectedItem);

     $scope.results = {};
     for (var i = 0; i < $scope.selectedItem.length; i++) {
        var selected = $scope.$scope.selectedItem[i];
        if(selected) {
         if ($scope.results.hasOwnProperty(selected)) {
         $scope.results[selected]++;
         } else {
            $scope.results[selected] = 1;
             }

        }
    }

Ved · Accepted Answer · 2016-08-31 11:51:13Z

1

Try this. I havent tested. But it should work. I have used array.reduce method.

var arr=[];
function arrayCount (array_elements,search) {
       var count = array_elements.reduce(function(n, val) {
           return  n + (val === search);
       }, 0);
       return count;
 }

   $scope.selectedItem.forEach(function(val){
        arr.push({val:val,count:arrayCount($scope.selectedItem,val)})
    });

answered Aug 31, 2016 at 11:51

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

5 Comments

Agnes Over a year ago

Thanks a lot , I knew where a mistake is

Agnes Over a year ago

very simple and clean code and I tried this, it is working, thank you so much

Ved Over a year ago

Thanks@Agnes for compliment. :)

Agnes Over a year ago

Hi @Ved, I have been confused about function arrayCount, especially the line "return n + ( val ==== search);", can u explain that for me？ Thanks

Ved Over a year ago

@Agnes. is it not working for you? Or you want to understand?

coding-dude.com · Accepted Answer · 2016-08-31 11:56:00Z

you had $scope twice in your code on line

 var selected = $scope.$scope.selectedItem[i];

var myApp = angular.module('myApp',[]);

myApp.controller('addIngredientCtrl', function($scope) {
$scope.item = {
   recipe:{
     IngredientMapping:[
       {quantity:1,Unit:{name:'kg'},Ingredient:{name:"onion"}}
     ]
   }
};
$scope.selectedItem=Array();
$scope.addIngredient= function(param){
console.log($scope.selectedItem);
    $scope.selectedItem.push(param);

   
 $scope.results = {};
     for (var i = 0; i < $scope.selectedItem.length; i++) {
        var selected = $scope.selectedItem[i];
        if(selected) {
         if ($scope.results.hasOwnProperty(selected)) {
         $scope.results[selected]++;
         } else {
            $scope.results[selected] = 1;
             }

        }
    }

    
  }
});

<style>
  .plus-size{height:16px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="addIngredientCtrl">
    <div class="ingredient-list">
        <h4>INGREDIENT:</h4>
        <ul ng-repeat="items in item.recipe.IngredientMapping">
            <li class="ingredient-list-style">
            <img src="http://164.132.196.117/chop_dev/api/AngularJs/images/plus.png" class="plus-size" ng-click="addIngredient(items.Ingredient.name)">
            {{items.quantity}} &nbsp; {{items.Unit.name}} &nbsp;{{items.Ingredient.name}}
            </li>
        </ul>
    </div>
    <div class="selected-list-box">
        <div class="selected-list">
            <h4>Selected List</h4>
            <div>
            <ul ng-repeat="selectedItem in selectedItem track by $index">
                <li>
                    {{selectedItem}} 
                    <li ng-repeat="(c, n) in results"> {{c}} shows {{n}} times</li>
                </li>
            </ul>

            </div>
        </div>

    </div>

yes , i figured out my mistake right now when I checked it back, thanks a lot

Collectives™ on Stack Overflow

count each item in an array using Angularjs

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related