angular array loop using ngFor get array count and display the value

Question

I showed data using below angular functions

availableLockers = [
    {
      "lockerCode": "L01",
      "allocStatus": "alloc"
    },
    {
      "lockerCode": "L02",
      "allocStatus": "un-alloc"
    },
    {
      "lockerCode": "L03",
      "allocStatus": "un-alloc"
    },
    {
      "lockerCode": "L04",
      "allocStatus": "temp-alloc"
    }, {
      "lockerCode": "L05",
      "allocStatus": "alloc"
},]

I am using bellow html

<div *ngFor="let locker of availableLockers let i=index;">{{locker.lockerCode}} </div>

The above code is working well. currently I need do display count of each status. Ex: how many lockers with "alloc" status, how many lockers with "temp-alloc" status.

how many lockers with "alloc" status, how many lockers with "temp-alloc" status — Kumara
– Kumara, Commented Jun 4, 2021 at 4:49
Bindings cannot contain assignments at column 31 in [ {{ availableLockers.filter(obj => allocStatus === "un-alloc").length — Kumara
– Kumara, Commented Jun 4, 2021 at 5:04
first thing that pops up in my mind is to loop the array and count statuses — kelvin
– kelvin, Commented Jun 4, 2021 at 5:13

RGA · Accepted Answer · 2021-06-04 05:40:40Z

2

You can try with filter(),

let availableLockers = [
  {
    lockerCode: 'L01',
    allocStatus: 'alloc'
  },
  {
    lockerCode: 'L02',
    allocStatus: 'un-alloc'
  },
  {
    lockerCode: 'L03',
    allocStatus: 'un-alloc'
  },
  {
    lockerCode: 'L04',
    allocStatus: 'temp-alloc'
  },
  {
    lockerCode: 'L05',
    allocStatus: 'alloc'
  }
];

function checkStatus(status) {
  let data = availableLockers.filter(locker => locker.allocStatus === status);
  return data.length;
}

console.log(checkStatus('alloc'));
console.log(checkStatus('un-alloc'));
console.log(checkStatus('temp-alloc'));

answered Jun 4, 2021 at 5:40

RGA

3134 silver badges12 bronze badges

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

Comments

DecPK · Accepted Answer · 2021-06-04 04:57:47Z

It's better to create a dictionary for the count of each allocStatus using reduce

and then use it where ever you want with O(1) time complexity

availableLockers = [
  {
    lockerCode: "L01",
    allocStatus: "alloc",
  },
  {
    lockerCode: "L02",
    allocStatus: "un-alloc",
  },
  {
    lockerCode: "L03",
    allocStatus: "un-alloc",
  },
  {
    lockerCode: "L04",
    allocStatus: "temp-alloc",
  },
  {
    lockerCode: "L05",
    allocStatus: "alloc",
  },
];

const dict = availableLockers.reduce((acc, { allocStatus }) => {
  if (acc[allocStatus]) ++acc[allocStatus];
  else acc[allocStatus] = 1;
  return acc;
}, {});

console.log(dict["alloc"]);
console.log(dict["un-alloc"]);
console.log(dict["temp-alloc"]);

jesvin palatty · Accepted Answer · 2021-06-04 06:27:53Z

0

In Html File

<div *ngFor="let locker of availableLockers; let i=index;">
 {{locker.lockerCode}}
</div>
<div>{{alloc}}</div>
<div>{{unAlloc}}</div>
<div>{{tempAlloc}}</div>

In TS file

    alloc:number = 0;
    unAlloc:number = 0;
    tempAlloc:number = 0;
    
    ngOnInit(){
     availableLockers.forEach((value)=>{
     if (value['allocStatus']=='alloc'){
        alloc++}
     elseif (value['allocStatus']=='un-alloc'){
            unAlloc++}
     elseif (value['allocStatus']=='temp-alloc'){
            tempAlloc++}

     })
     }

edited Jun 4, 2021 at 6:27

answered Jun 4, 2021 at 5:08

jesvin palatty

3833 silver badges10 bronze badges

1 Comment

jesvin palatty Over a year ago

My earlier code was completely wrong sorry for that, edited it and this should work now.

Collectives™ on Stack Overflow

angular array loop using ngFor get array count and display the value

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related