Find the differences between the values in two arrays of objects and eliminate them from the first array

const arrayOne = [
    { id: 22, value: 'hello' },
    { id: 33, value: 'there' },
    { id: 44, value: 'apple' }
];

const arrayTwo = [
    { id: 55, value: 'world' },
    { id: 66, value: 'banana' },
    { id: 77, value: 'apple' }
];

I need help figuring out the most efficient way to compare two arrays of objects by their values. If the value exists in both arrays, I want to remove it from arrayOne resulting in:

const arrayOne = [
    { id: 22, value: 'hello' },
    { id: 33, value: 'there' }
];

const arrayTwo = [
    { id: 55, value: 'world' },
    { id: 66, value: 'banana' },
    { id: 77, value: 'apple' }
];

Suggestions using JavaScript or Angular would be greatly appreciated. Thank you!

Answer №1

To perform filtering, you can utilize the Set method.

var firstOne = [{ id: 22, value: 'hi there' }, { id: 28, value: 'here' }, { id: 77, value: 'what' }],
    secondOne = [{ id: 2, value: 'bond' }, { id: 8, value: 'foobar' }, { id: 87, value: 'what' }],
    mySet = new Set;

secondOne.forEach(function (a) {
    mySet.add(a.value);
});

firstOne = firstOne.filter(function (a) {
    return !mySet.has(a.value);
});

console.log(firstOne);

Using ES6 syntax:

var firstOne = [{ id: 22, value: 'hi there' }, { id: 28, value: 'here' }, { id: 77, value: 'what' }],
    secondOne = [{ id: 2, value: 'bond' }, { id: 8, value: 'foobar' }, { id: 87, value: 'what' }],
    mySet = new Set;

secondOne.forEach(a => mySet.add(a.value));
firstOne = firstOne.filter(a => !mySet.has(a.value));

console.log(firstOne);

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

Modify the class of the focused element exclusively in Angular 2

I'm working on a project that involves several buttons and div elements. Currently, the divs are hidden, but I want to be able to reveal a specific div when its corresponding button is clicked. For example: If you click the first button, only the fir ...

What are the steps to creating a unique event within an AngularJs service?

In the midst of my AngularJs project, I find myself faced with a dilemma. I have a service designed to manage button events, but I want another service to handle these events indirectly without directly interacting with the buttons themselves. So, my goal ...

Encountering the issue "Error: _LoginPage.default is not a constructor"

This is the code I wrote: /// \<reference types = "cypress" /\> class LoginPage { visit() { cy.visit("https://ec2-35-179-99-242.eu-west-2.compute.amazonaws.com:2021/") } username(name) ...

When displaying text pulled from MYSQL in a div, white space is eliminated

I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...

Obtain the identifier of a div within nested HTML components by utilizing jQuery

How do I retrieve the id of the first div with the class: post, which is "367", using jquery in the given HTML code: <div id="own-posts"> <span class="title">Me</span> <div class="posts_container"> <div class="post"& ...

execute a rigorous compilation during the ng build angular process

I am currently working on a project using angular-cli and I have configured my package.json with the following scripts: "scripts": { "ng": "ng", "build": "ng build --base-href /test/", "prod": "ng build --prod --base-href /test/" } According to the ...

When a function is passed as an argument in Javascript code, the setTimeout function may behave in unique ways

After running the code below, I noticed an interesting behavior: setTimeout(() => console.log('first'), 0) console.log('second'); As expected in JavaScript's asynchronous nature, the output was as follows: second first Howev ...

Coinciding titles within flot pie chart

I am facing an issue with overlapping labels in my pie charts generated using jquery flot, especially when the chart pieces are very small. Is there a recommended solution to prevent this overlap? Below is the configuration for my current pie chart: ser ...

Creating a reusable field for reactive forms in Angular: A step-by-step guide

I need assistance with creating a versatile field component for reactive forms, but I am facing challenges in retrieving the value from the custom-input element. <form [formGroup]="form" (ngSubmit)="submit()"> <custom-input i ...

When the nav-element is clicked, it will load the new content/file.php into the div with the id of "include."

Seeking the most efficient method to load content from a php file into a designated div on my webpage, prioritizing speed, minimal performance requirements, and ease of implementation. Unsure whether it's preferable to utilize php or javascript for t ...

Uncover the hidden message in a string encoded for JavaScript

This encoded HTML code is intended for use in a JavaScript function <div class=\"ProductDetail\"><div style=\"width:780px\">\r\n\t<div class=\"baslik\" style=\"margin: 0px; padding: 5px 10px ...

Tips on adding a tooltip to the react-bootstrap tab element

How can I add a tooltip to the tabs in my React application using Bootstrap tabs? I have three tabs and I want a tooltip to appear when hovering over each tab. import { Tabs,Tab} from "react-bootstrap"; // inside return <Tabs variant="pills" ...

Some pages are compatible with JS while others are not... Although, the file can be found in the page source

I have limited knowledge in javascript, so I often find myself copy-pasting code. Currently, I am working on a website that includes a navigation sidebar. I have implemented a script to toggle a class that sets the display property to none. $(document).rea ...

Getting started with html2canvas: A beginner's guide

So here's a seemingly simple question... I'm diving into new territory and stumbled upon http://html2canvas.hertzen.com with a straightforward tutorial. After successfully running the command npm install -g html2canvas, I hit a roadblock. Where e ...

Save the currently active index of the mySwiper element even after the page is

After clicking through the carousel, I want to be able to store the current index and slide back to it after a page refresh. Is there a way to save this value in a variable so that I can use the mySwiper.slideTo() method to return to the last index? In si ...

There was an error while parsing JSON on line 1, where it was expecting either a '{' or '[' to start the input

I've been struggling to extract data from my PHP array that is encoded using json_encode. I'm new to JQuery and have been attempting this for a few days without success. This code snippet is not producing the desired results: $.post('coord ...

Having trouble with the DataTables jQuery plugin? Seeing a blank page instead of the expected results?

I've been trying to set up the Datatables jquery plugin for my HTML table but it's not working as expected. I have linked to the Datatables CDN for CSS styling and script, along with Google's hosted jQuery plugin. Additionally, I have a loca ...

What is the best way to implement a recursive service call that is triggered automatically at regular intervals?

I came across this code snippet: us.isConnected() .then(function (msg) { er.msg = msg }, function (msg) { er.msg = msg }); $interval(function () { us.isConnected() .then(function (msg) { er.msg = msg }, function (msg) { er.msg = msg }); }, ...

"Exploring the process of obtaining a compilation of Materialize CSS chip elements within an AngularJS framework

<div ng-repeat="job in jobList" > <div class="chip" id="jobchip" ng-model="jobchip"> <label for="jobchip"> Available Jobs</label> {{job.Name}} <i class="close material-icons">close</i> < ...

Is there a way to transform a Phaser 3 game into an android-game application?

As someone who is new to Phaser, I am curious about the possibility of converting a Phaser game into an Android game. Currently, I am utilizing Phaser with NPM for my projects. Any insights or advice on this matter would be greatly appreciated. Thank you! ...