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

Question

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'},

Those are not arrays. Those are objects. Have you tried using a loop? — JB Nizet
– JB Nizet, Commented Jan 11, 2020 at 17:42
Sorry for the mistake. I did try using a loop but I don't think I have used right, because my code returns 2 2 instead a single 2. — Lim Han Yang
– Lim Han Yang, Commented Jan 11, 2020 at 17:46
Then post your code. I really can't even understand how a method could return 2 values. — JB Nizet
– JB Nizet, Commented Jan 11, 2020 at 17:48
<div class="" *ngFor="let patient of patientlist"><div class="" *ngIf="patient.status === 'Served'"><a>{{patientlist.length}}</a></div></div> This my code, sorry my result is not 2 2 but 6 6 — Lim Han Yang
– Lim Han Yang, Commented Jan 11, 2020 at 17:54
You don't know how to write a loop in TypeScript of JavaScript? Everyone has to start somewhere of course, but if that's true, you really shouldn't be using Angular yet. Practice with basic programming exercises. Here's some tutorial about the for loop: tutorialspoint.com/typescript/typescript_for_loop.htm — JB Nizet
– JB Nizet, Commented Jan 11, 2020 at 18:03

brandt.codes · Accepted Answer · 2020-01-12 21:58:05Z

2

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 :-)

edited Jan 12, 2020 at 21:58

answered Jan 11, 2020 at 18:26

brandt.codes

9132 gold badges9 silver badges20 bronze badges

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

8 Comments

brandt.codes Over a year ago

You are welcome :-) (I don't know why people downvote a correct answer. Without comments. Strange.)

developer033 Over a year ago

@brandt.codes Not sure why the downvote, but it's a very bad practice to call a function like you did in your template sample.

developer033 Over a year ago

@brandt.codes Well, what you can do is to answer "completely": with the bad way for simplicity, and with the right/good way :) I'd love people teaching me the right way when I was starting.

brandt.codes Over a year ago

ok, you're right @developer033. I adjusted my answer. Feel free to extend :-)

Lim Han Yang Over a year ago

@[email protected] Than yous for teaching me you guys have been a great help to me.

|

Collectives™ on Stack Overflow

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

1 Answer 1

Fast solution:

Cleaner / Better solution:

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Fast solution:

Cleaner / Better solution:

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related