How to display the count of all items on click of a button in AngularJS?

Question

I have say 9 items on a carousel.

I want to show the count of individual items below the the carousel images.

I have created a Plunker for demonstrating the issue.

HTML CODE

<head>
<script data-require="[email protected]" data-semver="1.2.19" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">
</script>
<script data-require="[email protected]" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://vasyabigi.github.io/angular-slick/bower_components/slick-carousel/slick/slick.css" />
<script src="http://vasyabigi.github.io/angular-slick/bower_components/slick-carousel/slick/slick.js"></script>
<script src="angular-slick.js"></script>
<script src="script.js"></script>
</head>

<body ng-controller="appController">
<h1>Hello Plunker!</h1>
<button type="button" ng-click="showCount()">Show count of all items</button>

<slick ng-if="dataLoaded" init-onload="false" data="dataLoaded" slides-to-show="3" dots="true">
  <div ng-repeat="item in items">
    <span>
        <img ng-src="{{ item.imgSrc }}" alt="{{ item.catId}}" />
    </span>
    <span>{{ item.catId }}</span>
  </div>
</slick>

JS CODE

var app = angular.module("slick-example", ["slick"]);
app.controller('appController', function($scope, $timeout) {
    $scope.items = [];
    // simulate that the data is loaded from a remote source
    $timeout(function() {
        $scope.items = [{
            imgSrc: 'http://placekitten.com/325/325',
            catId: '1'
        }, {
            imgSrc: 'http://placekitten.com/g/325/325',
            catId: '2'
        }, {
            imgSrc: 'http://placekitten.com/325/325',
            catId: '3'
        }, {
            imgSrc: 'http://placekitten.com/g/325/325',
            catId: '4'
        }, {
            imgSrc: 'http://placekitten.com/325/325',
            catId: '5'
        }, {
            imgSrc: 'http://placekitten.com/g/325/325',
            catId: '6'
        }, {
            imgSrc: 'http://placekitten.com/325/325',
            catId: '7'
        }, {
            imgSrc: 'http://placekitten.com/g/325/325',
            catId: '8'
        }, {
            imgSrc: 'http://placekitten.com/325/325',
            catId: '9'
        }];
        $scope.countItem = [{
            "catId": 1,
            "availableCount": 2
        }, {
            "catId": 2,
            "availableCount": 3
        }, {
            "catId": 3,
            "availableCount": 4
        }, {
            "catId": 4,
            "availableCount": 2
        }, {
            "catId": 5,
            "availableCount": 1
        }, {
            "catId": 6,
            "availableCount": 5
        }, {
            "catId": 7,
            "availableCount": 3
        }, {
            "catId": 8,
            "availableCount": 2
        }, {
            "catId": 9,
            "availableCount": 1
        }];
        // update the dataLoaded flag after the data has been loaded
        // i dont know why but its important that the flag doesnt get initialized in an previous step like $scope.dataLoaded = false;
        $scope.dataLoaded = true;
    }, 2000);
    $scope.showCount = function() {}
});

When the button (button - Show count of individual items) is clicked I am trying to show the count of individual items below each image in carousel but I am not able to find a way to do so. On the click of the button count of all items is to be shown

Please refer the Plunker ( I am only using AngularJS and vanilla JS ,no Jquery )

Please help me how to show the count of individual items of the carousel just below each image

@ Jesus Carrasco yes count or quantity - any of the 2 terms you prefer? But I have to show the count/quantity in a div below the images of the carousel at the same time — zv321
– zv321, Commented Aug 10, 2017 at 17:00
@Jesus Carrasco i have to show the count of individual items , say count of item 1 is 2 while item 2 count is 4 , i have to show this individual count thing below each image — zv321
– zv321, Commented Aug 10, 2017 at 17:06
ok i understant you need to mix both json according the catId — Jesus Carrasco
– Jesus Carrasco, Commented Aug 10, 2017 at 17:07
@Jesus Carrasco I don't want to mix the json . Is it possible to leave the 2 json intact? — zv321
– zv321, Commented Aug 10, 2017 at 17:09

Brian · Accepted Answer · 2017-08-10 18:23:41Z

Here are two ways, second based on comment info.

Version not modifying array

This version waits until the data has "loaded", and then will create a map that will be used in the interpolated values of the count in your HTML.

HTML

This button will toggle the count on/off:

<button type="button" ng-click="showCount = !showCount">Toggle Count</button>

This goes where you want to display the count within the ng-repeat:

<span ng-if="showCount">Count of Items: {{ countMap[$index] }}</span>

For more on $index, review documentation on ng-repeat. Basically, it's telling you the index (location) in the array that the current repeated element is sourced from.

JS

In the root of your controller:

  // Create a mapping of array position : count
  $scope.countMap = {};

This allows us to look up data later with ease. Ex:

$scope.countMap1 = 'hello'; console.log($scope.countMap1); // -> hello

Then, after your $timeout, once it has resolved (meaning timeout is reached, http request finished, etc):

$timeout(function() {
   // Abbreviated, not including items.

  }, 2000).then(function() {
    // After resolve, assuming you are calling an API in real implementation

    // Iterate through the returned items, and add the count
    // to the array pos : count mapping
    for (var i = 0; i < $scope.items.length; i++) {
      $scope.countMap[i] = getCountFor($scope.items[i].catId);
    }

  });

** Also of note **, you set $scope.dataLoaded = true, but it is within the timeout. It should move into the .then(function() {} to ensure it's not set until the promise has resolved.

And then, the original getCountFor(id) function from the modifying version below:

  function getCountFor(id) {
    for (var i = 0; i < $scope.countItem.length; i++) {
      if ($scope.countItem[i].catId == id) {
        return $scope.countItem[i].availableCount;
      }
    }
  }

https://plnkr.co/edit/UOY7WONh6TUCBRrZYnvZ?p=preview

Version modifying array

This should do the trick. When you click "show count...", the function will iterate over each cat object in $scope.items, and call getCountFor(id) and append the availableCount value as found via relating the catId for the objects in each array.

HTML

  <div ng-repeat="item in items">
    <span>
        <img ng-src="{{ item.imgSrc }}" alt="{{ item.catId}}" />
    </span>
    <span>{{ item.catId }}</span>
    <span> Count of Items: {{ item.availableCount }}</span>
  </div>

JS

This is a function used to separate the concerns of the code. It takes id as a parameter. It then increments i, starting at 0, and going until the value of i is the length of the $scope.countItem array. For each position in the array, there is an item. If the value of id passed to the function matches the value of catId for the object at position i of the array, the value of available count is returned.

  function getCountFor(id) {
    for (var i = 0; i < $scope.countItem.length; i++) {
      if ($scope.countItem[i].catId == id) {
        return $scope.countItem[i].availableCount;
      }
    }
  }

This function is on $scope as it is called from your UI. When called, it iterates over each item in $scope.items, and sets a new property called availableCount on that item. It will render each item in $scope.items to look like this:

{
    imgSrc: 'http://placekitten.com/325/325',
    catId: '1',
    availableCount: 0
}

And the actual showCount() function:

  $scope.showCount = function() {
    $scope.items.forEach(function(item) {
      item.availableCount = getCountFor(item.catId);
    })
  }

https://plnkr.co/edit/2uLdLgVtsjbT6v4R0DWi?p=preview

i have to show the count of individual items , say count of item 1 is 2 while item 2 count is 4 , i have to show this thing below each item
its working. can you please help me understand your JS code. I am just a beginner programmer
I've created a new version that does not modify the array, and uses a dictionary instead.

Gaurav Srivastava · Accepted Answer · 2017-08-10 17:15:50Z

1

You can prepare an array like this on click:

 $scope.showCount = function(){

  angular.forEach($scope.countItem,function(val,key){
    $scope.count[val.catId] = val.availableCount;
  });

}

working plunkar link

edited Aug 10, 2017 at 17:15

answered Aug 10, 2017 at 17:00

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

2 Comments

zv321 Over a year ago

i have to show the count of individual items , say count of item 1 is 2 while item 2 count is 4 , i have to show this thing

Gaurav Srivastava Over a year ago

@Brian thanx :-)

Jesus Carrasco · Accepted Answer · 2017-08-10 17:46:37Z

0

You need to iterate over the items to find the idCat wich is in the other array. and sub-loop, to find the match id, and obtain the availableCount.

You need to do this in the showCount function

HTML Show count of all items

<slick ng-if="dataLoaded" init-onload="false" data="dataLoaded" slides-to-show="3" dots="true">
  <div ng-repeat="item in itemsCopy">
    <span>
        <img ng-src="{{ item.imgSrc }}" alt="{{ item.catId}}" />
    </span>
    <span>{{ item.catId }} {{ 'count: '+ item.availableCount }}</span>
  </div>
</slick>

controller

$scope.showCount = function(){

 $scope.itemsCopy = $scope.item;

angular.forEach($scope.itemsCopy, function(value, index){

    for(var i = 0; i < $scope.countItem.length; i++){
      console.log(value, $scope.countItem[i].catId);
      if(parseInt(value.catId) === $scope.countItem[i].catId ){
        value.availableCount = $scope.countItem[i].availableCount
      } 
    }
});
console.log($scope.itemsCopy);
};

WHEN click the button asid the count will show the count.

i put a plknr with the example: sample

edited Aug 10, 2017 at 17:46

answered Aug 10, 2017 at 17:13

Jesus Carrasco

1,3541 gold badge11 silver badges16 bronze badges

6 Comments

zv321 Over a year ago

its working. can you please help me understand your JS code. I am just a beginner programmer

zv321 Over a year ago

have you merged the 2 json ? I want to keep the 2 json intact , I don't want to merge them

Jesus Carrasco Over a year ago

they dont merge only add the attribute availableCont to items. instead of that you can make a copy for items. and in the ng-repeat do for the copy.

zv321 Over a year ago

I can't get your last statement. Can you elaborate ?

zv321 Over a year ago

I can't get your last statement. Can you elaborate ?

|

Collectives™ on Stack Overflow

How to display the count of all items on click of a button in AngularJS?

3 Answers 3

Version not modifying array

HTML

JS

Version modifying array

HTML

JS

4 Comments

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Version not modifying array

HTML

JS

Version modifying array

HTML

JS

4 Comments

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related