Use an Angular array filter to return only values that match

In my dataset, each client is associated with a set of cases. I am looking to extract only those clients who have cases with the status "Open". Clients with cases marked as "Closed" should not be included in the filtered list. Currently, my filtering method successfully filters out clients with "Open" cases, but those with "Closed" cases are still visible with a case type of 0. I want to completely hide these clients.

 var clientData = {
   "clientId": "1cb8fe0f-2d21-4e5b-99e9-fbbdf0eebdc7",
   "staffId": "b7b0897a-8d40-408e-841b-598c3c425762",
   "clientFirstName": "Antonia",
   "clientMiddleName": "Elliott",
   "clientLastName": "Schmeler",
   "preferredName": "Randall_Jenkins36",
   "clientNumber": "10459431",
   "clientDOB": "1967-04-18T18:59:57.291",
   "streetAddress": "073 Logan Plains",
   "city": "Camarillo",
   "state": "VT",
   "zip": "81652",
   "homePhone": "424-790-1552",
   "mobilePhone": "850-265-2651",
   "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="edaf9f8282869edbdead948c858282c38e8280">[email protected]</a>",
   "isActive": "Y",
   "createdDate": "08/09/2022 08:50:46",
   "modifiedDate": null,
   "reportStatus": null,
   "clientCases": [
      {
         "caseId": "1045868d-4fca-424d-9221-c287dbd6ecde",
         "clientId": "1cb8fe0f-2d21-4e5b-99e9-fbbdf0eebdc7",
         "caseName": "International Infrastructure Supervisor",
         "caseNumber": "96511392",
         "caseType": "Private referral",
         "caseStatus": "Open",
         "createdDate": "01/01/2022 09:10:00",
         "modifiedDate": null
      },
      {
         "caseId": "2045868d-4fca-424d-9221-c287dbd6ecde",
         "clientId": "1cb8fe0f-2d21-4e5b-99e9-fbbdf0eebdc7",
         "caseName": "Infrastructure Supervisor",
         "caseNumber": "26511392",
         "caseType": "Private referral",
         "caseStatus": "Closed",
         "createdDate": "01/01/2022 09:10:00",
         "modifiedDate": null
      }
   ]
},
{
   "clientId": "1cb8fe0f-2d21-4e5b-99e9-fbbdf0eebdc7",
   "staffId": "b7b0897a-8d40-408e-841b-598c3c425762",
   "clientFirstName": "Antonia",
   "clientMiddleName": "Elliott",
   "clientLastName": "Schmeler",
   "preferredName": "Randall_Jenkins36",
   "clientNumber": "10459431",
   "clientDOB": "1967-04-18T18:59:57.291",
   "streetAddress": "073 Logan Plains",
   "city": "Camarillo",
   "state": "VT",
   "zip": "81652",
   "homePhone": "424-790-1552",
   "mobilePhone": "850-265-2651",
   "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76340419191d054045360f171e19195815191b">[email protected]</a>",
   "isActive": "Y",
   "createdDate": "08/09/2022 08:50:46",
   "modifiedDate": null,
   "reportStatus": null,
   "clientCases": [
      {
         "caseId": "1045868d-4fca-424d-9221-c287dbd6ecde",
         "clientId": "1cb8fe0f-2d21-4e5b-99e9-fbbdf0eebdc7",
         "caseName": "International Infrastructure Supervisor",
         "caseNumber": "96511392",
         "caseType": "Private referral",
         "caseStatus": "Closed",
         "createdDate": "01/01/2022 09:10:00",
         "modifiedDate": null
      }
   ]
}


Expected Value


{
   "clientId": "1cb8fe0f-2d21-4e5b-99e9-fbbdf0eebdc7",
   "staffId": "b7b0897a-8d40-408e-841b-598c3c425762",
   "clientFirstName": "Antonia",
   "clientMiddleName": "Elliott",
   "clientLastName": "Schmeler",
   "preferredName": "Randall_Jenkins36",
   "clientNumber": "10459431",
   "clientDOB": "1967-04-18T18:59:57.291",
   "streetAddress": "073 Logan Plains",
   "city": "Camarillo",
   "state": "VT",
   "zip": "81652",
   "homePhone": "424-790-1552",
   "mobilePhone": "850-265-2651",
   "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c684b4a9a9adb5f0f586bfa7aea9a9e8a5a9ab">[email protected]</a>",
   "isActive": "Y",
   "createdDate": "08/09/2022 08:50:46",
   "modifiedDate": null,
   "reportStatus": null,
   "clientCases": [
      {
         "caseId": "1045868d-4fca-424d-9221-c287dbd6ecde",
         "clientId": "1cb8fe0f-2d21-4e5b-99e9-fbbdf0eebdc7",
         "caseName": "International Infrastructure Supervisor",
         "caseNumber": "96511392",
         "caseType": "Private referral",
         "caseStatus": "Open",
         "createdDate": "01/01/2022 09:10:00",
         "modifiedDate": null
      }
}

The current filtering method successfully narrows down the results, but if clients have closed cases, I do not want them to appear in the array at all.

let cloned = _.cloneDeep(this.clientData);
let filtered = cloned.map((i) => {
        i.clientCases = i.clientCases.filter((c) => c.caseStatus == 'Open');
        return i;
      });
angulartypescript

Answer №1

let copiedData = _.cloneDeep(this.clientData);
let activeCases = copiedData.map((item) => {
        item.clientCases = item.clientCases.filter((case) => case.caseStatus == 'Open');
        return item;
      });
let finalActiveCases = activeCases.filter((element)=>element.clientCases && element.clientCases.length>0);

During the initial filtering process, clients with open cases are selected. Therefore, clients with only closed cases will result in empty arrays.

Subsequently, the "activeCases" array is further filtered to ensure that the "finalActiveCases" array contains at least one open client case.

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

Exploring the implementation of enums in a separate file with Angular Ahead-Of-Time compilation

Converting a well-functioning JIT-based scenario angular-based app (angular-cli) to an AOT-based scenario. The AOT-build is successfully running. Upon opening the resulting webpage, I am encountering errors stating 'Cannot read property 'none&ap ...

angularangular-cliangular-aot

Is it possible for Typescript to resolve a json file?

Is it possible to import a JSON file without specifying the extension in typescript? For instance, if I have a file named file.json, and this is my TypeScript code: import jsonData from './file'. However, I am encountering an error: [ts] Cannot ...

javascripttypescriptwebpack

Missing data list entries for next js server actions

After successfully running my add function, I noticed that the data I added earlier is not being reflected in the list when I check. import React, { useEffect, useState } from "react"; import { createPost } from "./actions"; import { SubmitButton } from ". ...

typescriptnext.jsfetchserver-action

Incompatible parameter type for the Angular keyvalue pipe: the argument does not match the assigned parameter type

I need to display the keys and values of a map in my HTML file by iterating over it. To achieve this, I utilized Angular's *ngfor with the keyvalue pipe. However, I encountered an error when using ngFor: The argument type Map<string, BarcodeInfo ...

htmlangularjsangulartypescriptngfor

How to Extract Component Name from a URL in Angular

Routes are defined in the Angular app's app-routing.module.ts file as shown below: const routes: Routes = [ { path: 'abc/:id', component: AbcComponent }, { path: 'xyz/:id/tester/:mapId', component: XyzComponent }, ...

angular

Combining Arrays Together in TypeScript

I am in need of a solution to merge two arrays into one using TypeScript. First Array Object: export interface Item{ Label : string, Code : string, Price : number, } Second Array Object: export interface Amou ...

typescriptangular6

Tips for incorporating a mail button to share html content within an Angular framework

We are in the process of developing a unique Angular application and have integrated the share-buttons component for users to easily share their referral codes. However, we have encountered an issue with the email button not being able to send HTML content ...

htmlangulartypescriptemailoutlook

What is preventing MenuItemLink from being displayed in the menu?

I have created a unique page for users to purchase subscriptions, but I am having trouble accessing that page because the button is not appearing in the menu. I followed the steps outlined in the official guide, but only the dashboard and resources buttons ...

reactjstypescriptnext.jsreact-admin

How to handle form-data in NestJS Guards?

I've been trying to access form-data in my NestJS Guards, but I'm experiencing some difficulties. Despite following the tutorial provided here, I am unable to see the request body for my form-data input within the Guard itself. However, once I ac ...

node.jstypescriptexpressmulternestjs

What is the best way to link this to a function in AngularIO's Observable::subscribe method?

Many examples use the Observable.subscribe() function in AngularIO. However, I have only seen anonymous functions being used like this: bar().subscribe(data => this.data = data, ...); When I try to use a function from the same class like this: update ...

javascriptangulartypescriptthissubscribe

Creating a Persistent Top Navigation Bar using Bootstrap and Angular

I am struggling to implement a fixed top navbar in Angular. The structure of my main app.component template is as follows: <page-header></page-header> <router-outlet></router-outlet> The bootstrap navbar is included within my ...

csstwitter-bootstrapangularbootstrap-4

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

Sign up for a variety of HTTP observables subscriptions

I have a collection of Observables stored in activatedRoute.data.example and I need to listen for the most recent value emitted. private data$ = forkJoin( this.activatedRoute.data.pipe( map(({ examples }) => examples) ) ); ngOnInit(): void { ...

angularrxjs

Using Rollup alongside Typescript to handle absolute imports for type declarations

In the process of creating a React component library, the project structure resembles the following: src/ components/ utils/ hooks/ Currently, there is an attempt to generate type files (.d.ts) using rollup. The types are successfully generated, ...

javascriptreactjstypescriptrollup

The timer functionality in the Angular 2+ component is malfunctioning

This situation is quite perplexing. I have a timer function that works perfectly on all my components except one. Strangely, I can't seem to figure out why this particular component is not cooperating, especially since there are no error messages appe ...

javascriptangulartypescript

Unable to call a component's method from a different component in Angular 7

How can I call the toggleSidebar() method of the SidebarComponent from the HeaderComponent using the callToggleSidebarOnToggleSidebarBtn() method? I am encountering an error that I cannot comprehend. What is the correct way to use a method of one component ...

angulartypescriptangular-cliangular-componentsangular-cli-v7

Is there a way to detect browser errors using JavaScript or Angular 2?

On the back-end, I am looking to add these uncaught errors to the log file. These errors are not being captured in angular2. How can I go about reading and handling these errors?https://i.sstatic.net/Kljon.png ...

javascriptangularbrowser

Utilizing the power of KendoUI and Angular2 for autocomplete: governing accepted values

I successfully integrated the KendoUI Autocomplete feature with live search functionality. It is working well and meeting my expectations. However, I want to limit the autocomplete suggestions to values from the list only. For example, if I type "London" ...

angularautocompletekendo-ui-angular2

Transforming a function into an array in TypeScript

I attempted to use the map() function on a dataURL array obtained from the usePersonList() hook, but I am struggling to convert my function to an array in order to avoid errors when clicking a button. import Axios from "axios"; import React, { us ...

javascriptreactjstypescript

Unable to refresh the context following a successful API call

My current project in NextJS requires a simple login function, and I have been attempting to implement it using the Context API to store user data. However, I am facing an issue where the context is not updating properly after fetching data from the back-e ...

reactjstypescriptnext.js