Discovering the quantity of items with a specific value in Angular 8

I'm attempting to determine the number of objects with a status value of 'Served', which should yield 2. I'm unsure about the method I should use to achieve this. Any suggestions on which method would be best?

{full_name: 'Jenny', phone_number: '8458 7098', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="581d20393528343d182139303737763b3735">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="612419000c110d04211800090e0e4f020e0c">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bffac7ded2cfd3daffc6ded7d0d091dcd0d2">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a3f021b170a161f3a031b12151554191517">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a1f223b372a363f1a233b32353574393537">[email protected]</a>', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '6', gender: 'Male', race: 'Chinese', height: '172', weight: '63'},
angulartypescript

Answer №1

Quick Fix:

To efficiently manage the data, store objects in an array:

private data = [
  {full_name: 'Jenny', phone_number: '8458 7098', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8edd0c9c5d8c4cde8d1c9c0c7c786cbc7c5">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16536e777b667a73566f777e79793875797957">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d99ca1b8b4a9b5bc99a0b8b1b6b6f7bab6b4">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f2a170e021f030a2f160e070000410c0002">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="397c41585449555c794058515656175a5654">[email protected]</a>', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '6', gender: 'Male', race: 'Chinese', height: '172', weight: '63'}
];

Create a simple filter method for entries, focusing on their status:

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

Incorporate the method call into the template to retrieve the count:

COUNT: {{ getServedCount() }}

Streamlined / Enhanced Solution:

Template:

<hello name="{{ name }}"></hello>
<p>
  Start editing and witness the magic unfold :)
</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 may come from various sources like services or cookies. For now, we initialize it with dummy data in a private variable.
  private data = [
    {full_name: 'Jenny', phone_number: '8458 7098', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7b28f969a879b92b78e969f9898d994989a">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e1b263f332e323b1e273f363131703d3133">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="36734e575b465a53764f575e59591855595b">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="703508111d001c15300911181f1f5e131f1d">[email protected]</a>', 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: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d68554c405d41486d544c454242034e4240">[email protected]</a>', dob: '25/02/1960', status: 'Next', appointment_type: 'Online', queue_num: '6', gender: 'Male', race: 'Chinese', height: '172', weight: '63'}
  ];

  // Public variable to be accessed in the template
  public servedCount = 0;

  ngOnInit(): void {
    // Triggers the "getServedCount" method once upon initialization.
    this.servedCount = this.getServedCount(this.data);
  }

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

For additional reference, click on the following link. :-)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for the lack of compatibility between the TypeScript compilerOptions settings 'noEmitOnError: true' and 'isolatedModules: false'?

Whenever I try to execute TypeScript with isolatedModules set as true and then false, I keep encountering this error message: tsconfig.json(5,9): error TS5053: Option 'noEmitOnError' cannot be specified with option 'isolatedModules'. ...

typescripttsconfigcompiler-options

Typescript: Ways to fix the error 'rxjs/Rx does not have any exported member 'SubscriptionLike'

I'm attempting to replicate the steps outlined in this tutorial found here https://www.youtube.com/watch?v=gxCu5TEmxXE. However, upon running tsc -p, I encounter an error. Is there a specific import that I am missing? ERROR: node_modules/@angular/co ...

javascriptangulartypescriptfirebasegoogle-cloud-functions

Is there a way to incorporate my getter into a computed property?

My Vuex Store is built using Vuex module decorators and I am facing an issue with using a getter for a computed property. Here is my code: @Module export default class WorkoutModule extends VuexModule { _workout: Workout; @Mutation startWork ...

typescriptvue.jsvuex

"Is it possible to differentiate between a variable that is BehaviorSubject and one that is not

I am dealing with a variable that can be of type Date or BehaviorSubject<Date | null>. My concern is figuring out how to determine whether the variable is a BehaviorSubject or not. Can you help me with this? ...

javascriptreactjstypescriptrxjs

Tips for sending data from an HTML page to an Angular custom element

I have successfully created an angular custom element from an angular component that I would like to call from a standard HTML page. The custom element requires a parameter, which functions properly when called as a component within an angular project. Ho ...

javascripthtmlangularcustom-element

Is there a way to programmatically update the values of Primeng Turbotable's ReorderableColumns and ResizableColumns from a component

The properties resizableColumns and reorderableColumns have default values of 'true'. What I am attempting to do is fetch 'true' or 'false' from an initdata file in the ngOnInit() method, and then set these initial values to t ...

angularprimengprimeng-turbotable

Incorporating HTML and JavaScript into TypeScript: How to Embed a Shopify Buy Button in a .tsx document

I am currently looking to integrate Shopify with my personal website. My frontend is built using React (NextJS with TypeScript). The embed code for the Shopify buy button consists of an HTML div tag wrapping JavaScript. I am wondering how I can effectivel ...

javascripttypescriptnext.jsshopifytsx

Using TypeScript to Add Items to a Sorted Set in Redis

When attempting to insert a value into a sorted set in Redis using TypeScript with code like client.ZADD('test', 10, 'test'), an error is thrown Error: Argument of type '["test", 10, "test"]' is not assigna ...

javascriptnode.jstypescriptredisnode-redis

Transformation of Ionic 2 ScreenOrientation Plugin

Can someone assist me with this issue? A while back, my Ionic 2 app was functioning correctly using the ScreenOrientation Cordova plugin and the following code: window.addEventListener('orientationchange', ()=>{ console.info('DEVICE OR ...

cordovatypescriptionic2cordova-pluginsscreen-orientation

I'm unable to successfully include a download link for a PDF file stored locally

Looking to provide a download link for my resume on my website. Here's the code I'm using: <a href="My Resume.pdf" class='download' download="Resume PDF">Download CV</a> Despite using what I believe to ...

htmlangulardownloadhref

Dividing a collection of URLs into smaller chunks for efficient fetching in Angular2 using RxJS

Currently, I am using Angular 2.4.8 to fetch a collection of URLs (dozens of them) all at once. However, the server often struggles to handle so many requests simultaneously. Here is the current code snippet: let collectionsRequests = Array.from(collectio ...

javascriptangulartypescriptrxjs

What is the best way to utilize a React type as props for a custom component?

To make my component work properly, I am required to pass the inputmode as props from an external source. The acceptable values for <input inputMode=<valid values>> are outlined in the React types (node_modules@types\react\index.d.ts) ...

reactjstypescripttypes

Typescript issue when a value is possibly a function or null

I have defined a type called StateProps with the following properties type StateProps = { isPending: boolean, asyncFn: (...args: any[]) => void | null } To initialize, I set up an initialState variable where the asyncFn property is initially s ...

typescript

I noticed that when using Next.js with the `revalidate: 1` option on a static page, it is triggering two full F5 refresh actions instead of just one. I was hoping for

Currently, I have set up a blog post edit page in my Next.js project. The post pages are utilizing the Incremental Static Regeneration feature with a revalidation time of 1 second for testing purposes. In the future, I plan to increase this to a revalidat ...

javascriptreactjstypescriptnext.js

I'm having trouble grasping the concept of 'globals' in TypeScript/NodeJS and distinguishing their differences. Can someone explain it to me?

As I review this code snippet: import { MongoMemoryServer } from "mongodb-memory-server"; import mongoose from "mongoose"; import request from "supertest"; import { app } from "../app"; declare global { function s ...

node.jstypescriptjestjsglobalts-jest

The feature 'forEach' is not available for the 'void' type

The following code is performing the following tasks: 1. Reading a folder, 2. Merging and auto-cropping images, and 3. Saving the final images into PNG files. const filenames = fs.readdirSync('./in').map(filename => { return path.parse(filen ...

javascriptnode.jstypescripttypes

Utilizing ActivatedRoute in conjunction with another Service

I am facing an issue while trying to utilize the ActivatedRoute service in a different service. The problem lies in the fact that when I use the ActivatedRoute service in my service, it is observing the main App component and not picking up any route param ...

angularjsangularangular2-routing

Failed service worker registration: Angular 9 PWA malfunctioning following Universal Prerendering integration

Issue encountered in the console log An error was thrown due to an unsupported MIME type ('text/html'). Service worker registration failed with: DOMException: Failed to register a ServiceWorker for scope ('https://localhost:4000/') wi ...

angularangular-universalprerenderangular9angular-pwa

Retrieving text content from a file using React

I've been experiencing difficulties with my fetch function and its usage. Although I can retrieve data from the data state, it is returning a full string instead of an array that I can map. After spending a few hours tinkering with it, I just can&apos ...

javascriptreactjsnode.jstypescript

Can we securely retrieve nested properties from an object using an array of keys in TypeScript? Is there a method to accomplish this in a manner that is type-safe and easily combinable?

I wish to create a function that retrieves a value from an object using an array of property keys. Here's an example implementation: function getValue<O, K extends ObjKeys<O>>(obj: O, keys: K): ObjVal<O,K> { let out = obj; for (c ...

typescripttypescript-generics