CODEWITHSUNDEEP
angulartypescript
Lim Han Yang
Lim Han Yang

Reputation: 440

How to find the number of objects with certain value for Angular 8

I am trying get the number of objects where the status value is 'Served', so the value I should get is 2. I am not sure how to achieve this, what method should I ought to use.

{full_name: 'Jenny', phone_number: '8458 7098', email: '[email protected]', dob: '14/11/1994', status: 'Served', appointment_type: 'Online', queue_num: '1', gender: 'Female', race: 'Malay', height: '169', weight: '55'},
{full_name: 'Howard', phone_number: '8845 5888', email: '', dob: '09/11/1987', status: 'Served', appointment_type: 'Online', queue_num: '2', gender: 'Male', race: 'Chinese', height: '175', weight: '75'},
{full_name: 'Kelly', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Current', appointment_type: 'Online', queue_num: '3', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
{full_name: 'David Yang', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '4', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
{full_name: 'Jun Hao', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '5', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
{full_name: 'Xia Long', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '6', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},

Upvotes: 0

Views: 434

Answers (1)

brandt.codes
brandt.codes

Reputation: 923

Fast solution:

Put the data (objects) in an array:

private data = [
  {full_name: 'Jenny', phone_number: '8458 7098', email: '[email protected]', dob: '14/11/1994', status: 'Served', appointment_type: 'Online', queue_num: '1', gender: 'Female', race: 'Malay', height: '169', weight: '55'},
  {full_name: 'Howard', phone_number: '8845 5888', email: '', dob: '09/11/1987', status: 'Served', appointment_type: 'Online', queue_num: '2', gender: 'Male', race: 'Chinese', height: '175', weight: '75'},
  {full_name: 'Kelly', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Current', appointment_type: 'Online', queue_num: '3', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
  {full_name: 'David Yang', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '4', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
  {full_name: 'Jun Hao', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '5', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
  {full_name: 'Xia Long', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '6', gender: 'Male', race: 'Chinese', height: '172', weight: '63'}
];

write a small method to filter the entries. Here we filter the status:

getServedCount(): number {
  return this.data.filter(entry => entry.status === 'Served').length;
}

and in the template you just call the method to get the count:

COUNT: {{ getServedCount() }}

Cleaner / Better solution:

Template:

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

COUNT: {{ servedCount }}

TypeScript:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnInit {

  // DATA can be provided via service, cookie, storage,... here we use so dummy data in a private variable.
  private data = [
    {full_name: 'Jenny', phone_number: '8458 7098', email: '[email protected]', dob: '14/11/1994', status: 'Served', appointment_type: 'Online', queue_num: '1', gender: 'Female', race: 'Malay', height: '169', weight: '55'},
    {full_name: 'Howard', phone_number: '8845 5888', email: '', dob: '09/11/1987', status: 'Served', appointment_type: 'Online', queue_num: '2', gender: 'Male', race: 'Chinese', height: '175', weight: '75'},
    {full_name: 'Kelly', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Current', appointment_type: 'Online', queue_num: '3', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
    {full_name: 'David Yang', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '4', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
    {full_name: 'Jun Hao', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '5', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
    {full_name: 'Xia Long', phone_number: '9145 5843', email: '[email protected]', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '6', gender: 'Male', race: 'Chinese', height: '172', weight: '63'}
  ];

  // variable to access from the template
  public servedCount = 0;

  ngOnInit(): void {
    // triggers the "getServedCount" method only once.
    this.servedCount = this.getServedCount(this.data);
  }

  private getServedCount(data): number {
    return data.filter(entry => entry.status === 'Served').length;
  }
}

And here the stackblitz :-)

Upvotes: 2

Related Questions