The use of set.has in filtering does not produce the desired outcome

I am attempting to use Set.has to filter an array in the following way:

const input = [ 
  { nick: 'Some name', x: 19, y: 24, grp: 4, id: '19340' },
  { nick: 'Some name', x: 20, y: 27, grp: 11, id: '19343' },
  { nick: 'Some name', x: 22, y: 27, grp: 11, id: '19344' },
  { nick: 'Some name', x: 22, y: 30, grp: 11, id: '19350' },
  { nick: 'Some name', x: 22, y: 12, grp: 23, id: '19374' },
  { nick: 'Some name', x: 22, y: 29, grp: 23, id: '19377' } 
];

const grpToOmit = [ 11, 23 ];
const groupToOmitSet = new Set(grpToOmit);

input.filter(it => {
  console.log(groupToOmitSet.has(it.grp))
  return !groupToOmitSet.has(it.grp);
});

console.log(input)

After creating a collection of unique values from the grpToOmit array, I check for them within the filter function.

Despite getting multiple true results in

console.log(groupToOmitSet.has(it.grp))
, this filter does not produce any changes to the input array.

Answer №1

.filter creates a fresh array, rather than modifying the current one. Make sure to store the result in a variable.

const data = [ 
    { nick: 'Some name', x: 19, y: 24, grp: 4, id: '19340' },
    { nick: 'Some name', x: 20, y: 27, grp: 11, id: '19343' },
    { nick: 'Some name', x: 22, y: 27, grp: 11, id: '19344' },
    { nick: 'Some name', x: 22, y: 30, grp: 11, id: '19350' },
    { nick: 'Some name', x: 22, y: 12, grp: 23, id: '19374' },
    { nick: 'Some name', x: 22, y: 29, grp: 23, id: '19377' } 
];

const groupsToExclude = [ 11, 23 ];
const excludedGroupsSet = new Set(groupsToExclude);

const result = data.filter(item => {
  return !excludedGroupsSet.has(item.grp);
});

console.log(result)

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

Can the name of the Grunt task target be utilized within attributes?

I have implemented the grunt-replace task to make some content changes in the index.html file. However, I am looking for a way to avoid repeating code unnecessarily. The code snippet below is just an example of what I am trying to accomplish: replace: { ...

Issues with sending emails through Nodemailer in a Next.js project using Typescript

I'm currently working on a personal project using Nodemailer along with Next.js and Typescript. This is my first time incorporating Nodemailer into my project, and I've encountered some issues while trying to make it work. I've been followin ...

Embarking on the journey of transitioning code from server-side to client-side

Currently, I am looking to transition the code behind section of my asp.net web forms application to client-side ajax or javascript - still deciding on which route to take. The main goal for this change is to ensure that the application remains functional ...

Changes are not being detected in new Angular 2 files

Currently, I am enhancing an Angular 2 project by incorporating new modules. However, the changes I made in these files are not being recognized within the project. I have attempted to research how change detection functions in Angular 2, but have not bee ...

Guide on linking an XML reply to TypeScript interfaces

Currently, I am faced with the task of mapping an XML response (utilizing text XMLHttpRequestResponseType) from a backend server to a TypeScript interface. My approach has been to utilize xml2js to convert the XML into JSON and then map that JSON to the Ty ...

Ways to store AJAX response data for future use

I am struggling with implementing the getState function. My goal is to update a field on click using a state value retrieved from an AJAX call. I have come across mentions of promises in other responses, but I am unsure how to integrate them into my code ...

Instructions for obtaining and assigning a reference to a recently cached associated object within the Apollo client InMemoryCache

My data consists of a set of interconnected items like this: book { id ... related_entity { id ... } } Once Apollo caches it, there are two separate cache objects. The related_entity field on book points to an EntityNode object. Everything ...

Utilizing Material UI's TextField components for validating React forms

I've spent the past hour researching this topic and unfortunately, there isn't much information available on the internet. My goal is to validate input fields to ensure that all fields are filled out; otherwise, an error will be displayed. The le ...

Enhancing user experience with Ajax login forms that seamlessly integrate with browser password remember functionality

I recently implemented an ajax-based login form on my website, but it seems that browsers are not recognizing it as a login form and therefore not offering to remember passwords for easier login access. Once the submit button is clicked, the entered value ...

Failure to build using the spread operator is unique to the Travis CI environment

I encountered an issue when running the build command npm run build locally for my website. However, on Travis CI, it fails with the following error: > node scripts/build.js /home/travis/build/PatrickDuncan/patrickduncan.github.io/node_modules/@hapi/ho ...

The functionality of CKEDITOR.tools.getindex has not been found

I'm currently in the process of updating my CKEDITOR version from 4.4.1 to 4.5.1. In order to do this, I am uploading my build-config.js file to ensure that I have all the same plugins as before with the latest CKEDITOR version. The issue arises when ...

Scrolling to the complete height of a div using scrollTop

Experience an automated scroll to the bottom of the div, followed by a smooth upward motion over 5 seconds, all while looping seamlessly. A small issue arises where the code only recognizes the standard height set for the div, not its actual scrollable he ...

Troubleshooting issues with Vue CLI 4 and A-Frame: Finding solutions for

Recently, I've been working on creating a VR web app using Vue cli 4.2.3 and aframe.io. However, I encountered numerous error messages related to aframe's components. [Vue warn]: Unknown custom element: <a-scene> - did you register the com ...

Dealing with errors while managing asynchronous middleware in Express

I have implemented an asynchronous middleware in express to utilize await for a cleaner code structure. const express = require('express'); const app = express(); app.use(async(req, res, next) => { await authenticate(req); next(); }) ...

Unexpected behavior occurs when ajax is added to an array for jQuery promise results

In my code, I have an each loop that makes individual AJAX requests and stores them in an array like this: var promises = []; $items.each(function(k, v) { promises.push( $.ajax({ url: ..., .... }) ); }); $.when.app ...

Utilizing React Views in an Express Environment

I am struggling to find a simple example that demonstrates how to connect an Express.js route to render a React view. This is what I have tried so far. +-- app.js +-- config | +-- server.js +-- routes | +-- index.js +-- views | +-- index.html app. ...

Steps for adding a row as the penultimate row in a table

There aren't many solutions out there that don't rely on jQuery, but I'm looking to avoid it. The row content needs to be generated dynamically. Here is my flawed approach: function addRow() { let newRow = '<tr><td>B ...

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Upon clicking a link within an element, the following CSS is applied: <a class="vehicleinfo avai-vehicle-info-anc-tag" ng-click="vehicleInfo($event)">Vehicle Info <span class="s-icon red-down-arrow"> </span> </a> $scope.vehic ...

Interfaces and Accessor Methods

Here is my code snippet: interface ICar { brand():string; brand(brand:string):void; } class Car implements ICar { private _brand: string; get brand():string { return this._brand; } set brand(brand:string) { this. ...

Reducing file size through compression (gzip) on express js version 4.4.1

My express js app is functioning as a web server, but I am having trouble with serving unzipped static content (js and css files). I have tried using compression from https://github.com/expressjs/compression, but it doesn't seem to be working for me. ...