Filtering with Angular to eliminate items based on their unique identifiers

What is the best way to filter values in Angular or remove values based on their IDs? I need to delete data or objects from an array of objects where the ID is 5, 12, and 9.

In addition, we want to filter using multiple IDs, such as when the ID is 5, 12, and 9.

Something like:

let newArr = data.filter ...

#data

[
    {
        "id": 12,
        "name": "Architect",
        "isShow": true,
        "transactionRoleId": 12
    },
    {
        "id": 11,
        "name": "Construction Project Director",
        "isShow": true,
        "transactionRoleId": 11
    },
    {
        "id": 9,
        "name": "COVP",
        "isShow": true,
        "transactionRoleId": 9
    },
    ...
]
angulartypescript

Answer №1

Give this a shot:

 let idsToRemove = [8, 15, 11];
 const modifiedData = data.filter((item) => idsToRemove.indexOf(item.id) === -1);
 console.log(modifiedData);

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

The specified type argument is not compatible with the ObservableInput<any> type

Struggling with an issue where the argument type (key:string) => Observable | PayloadType | is causing problems when trying to assign it to a parameter of type '(value: string, index: number) => ObersvableInput' return action$.pipe( fil ...

javascriptreactjstypescriptobservablemergemap

Creating a Typescript interface that includes keys from another interface

interface A{ a: string; b: string; c: string; // potentially more properties } interface B{ [K in keyof A]: Boolean; } What could be the issue with this code? My goal is to generate a similar structure programmatically: interface B{ ...

typescript

Utilizing Ace with a personalized theme in Angular 2 application while straying away from the default theme directory

I am currently facing an issue with integrating an Ace editor into my Angular 2 application, which is built using angular-cli. I want to link the Ace editor to a custom theme stored in the app's assets folder src/app/assets instead of within node_modu ...

angularace-editor

Issue with Angular 2 - Basic form validation no longer functioning

The Angular 2 application I've been working on includes a simple form with input fields and basic HTML validation. Here's an example: <form (onSubmit)="submit()"> <input type="email" /> <input type="submit" value="save" /> ...

htmlformsangularvalidation

Do Not Activate the Android App with Deeplink in Ionic3

I'm currently using the ionic-plugin-deeplinks to enable deep linking within my app. Here are the steps I followed: $ ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=myapp --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOS ...

androidtypescriptionic3deeplink

Tag: "AngularObjectUnsubscribedError"

Encountering a bug in my code ObjectUnsubscribedErrorImpl {message: 'object unsubscribed', name: 'ObjectUnsubscribedError', ngDebugContext: DebugContext_, ngErrorLogger: ƒ} message : "object unsubscribed" name : "Obje ...

angulartypescriptsubscription

Creating a TypeScript custom type checker for checking the length of strings

I'm currently developing a React component that requires a string prop to have a maximum length of 10 characters. My goal is for the compiler to trigger an error whenever a user attempts to pass a string longer than 10 characters. interface Componen ...

reactjstypescript

How can I link types from @types to my local code?

I've created a method that utilizes validatorjs for validation purposes. Here's an example of the code: /** * Checks if the string is a mobile phone number (locale options: ['zh-CN', 'zh-TW', 'en-ZA', 'en- ...

javascripttypescript

Analyzing bundle files with Angular CLI output

Currently, I am utilizing Angular CLI to develop a production app by using the --prod switch. The resulting bundle is generated in the dist directory. Is there a method to determine which classes and functions have been included in the final bundle after ...

angularangular-clitree-shaking

The combination of Pick<A, Exclude<keyof A, keyof B>> & B does not match the type A

Could this be a bug, or am I misunderstanding TypeScript? Check out the code snippet below: type Omit<T, K> = Pick<T, Exclude<keyof T, K>>; const func = <A extends B, B>() => { const aWithoutB: Omit<A, keyof B> = {} as ...

typescript

Why is my React component not being updated with Routes?

I'm new to using react-router and I'm struggling with it for the first time. Here is the code snippet: App.tsx import React from 'react'; logo = require('./logo.svg'); const { BrowserRouter as Router, Link, Route } = require ...

javascriptreactjstypescript

One-time export feature similar to Typescript's export_once functionality

When I have the following code structure: File1.ts function someFunction(){...} export default someFunction(); and then File2.ts import File1 from "./File1"; File3.ts import File1 from "./File1"; My question is, will the export de ...

javascripttypescriptnode-modules

"Utilize a loop in Angular 2 to consistently send HTTP GET requests to service

Hello, I'm new to working with Angular. Currently, I have an array of product IDs and I would like to make HTTP GET requests based on each ID in the array using a loop. Can someone assist me with this task? Service : addedProductIdArray : string[] = ...

angular

Loading the value of a Subject variable in an Angular 2 application using Typescript

I am currently developing an Angular2 application where I am loading data from a service into my component as a subject. public type1Choisi: any; constructor( public formeService: FormeService, ...) { this.formeService._type1.subscribe(type1 => ...

typescriptangularangular2-directivesangular2-services

Tips for extracting individual fields from a payload in Angular 8

How do I extract individual fields from the payload and bind them with HTML on a page? I am trying to retrieve the alphacode and countryname in Angular 8. This is my Component: this.table$ = this.productService.get(id) .map(actions => { c ...

angular

Guide on converting general objects into a TypeScript class

Having recently started working with Typescript, I have a JSON object that needs to be mapped to a generic interface. However, my initial attempt at creating the interface seems to be incorrect. I need assistance in constructing a generic interface or cl ...

typescript

Update the names of the output fields within the returned object from the API

Recently I delved into nodejs and typescript to create an API using express. I attempted to return a custom object in my API structured as follows: export class Auction { private _currentPrice:number = 0; private _auctionName:string; public ...

node.jstypescriptexpress

The error code TS2322 indicates that the type 'object' cannot be assigned to type 'NgIterable<any>'. Furthermore, the type 'object' is not compatible with type 'Iterable<any>'

I'm attempting to utilize the HTTP library within Angular to retrieve information from a link containing a JSON file, but unfortunately, I am encountering some issues with it. api.server.ts: import { Injectable } from '@angular/core'; impor ...

angular

I am facing an issue where my video file is not being recognized by Next.js when using TypeScript

In my project using next.js, typescript, and tailwindcss, I encountered an issue while creating the Masthead for my website. I wanted to set a video as the background, but for some reason, the video was not being recognized. I tried moving it to differen ...

typescriptnext.jstailwind-css

Troubleshooting Guide for Resolving the Issue: Module "@angular/core/src/view/util" Not Found

As I work on my final year project with Ionic, my laptop unexpectedly experienced a short circuit. Now, I am continuing the development of my project using multiple computers and laptops, but I'm facing an issue where my project's output is not d ...

angularionic-frameworknpmionic3