Agnes
Agnes

Reputation: 53

count each item in an array using Angularjs

I wanna achieve one function using AngularJs, like this please click here to see what i want, 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;
             }

        }
    }

Upvotes: 1

Views: 263

Answers (2)

coding-dude.com
coding-dude.com

Reputation: 808

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>

Upvotes: 0

Ved
Ved

Reputation: 12113

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)})
    });

Upvotes: 1

Related Questions