Using JavaScript to filter an array of objects by another array of objects

My collection of messages includes

oldMessages = [ {id:1,message:'message_A'} , {id:2,message:'message_B'} ]

and another set as

newMessages = [ {id:1,message:'message_A'} , {id:2,message:'message_B'} , {id:3,message:'message_C'} ]

To extract only the entry {id:3,message:'message_c'} by comparing oldMessages with newMessages, I need to compare them solely on their id values.

Answer №1

If you want to accomplish this task, you can utilize the array method .find() in the following way:

const previousItems = [ {id:1,item:'item_A'} , {id:2,item:'item_B'} ]
const currentItems = [ {id:1,item:'item_A'},{id:2,item:'item_B'} , {id:3,item:'item_C'} ]
const result = currentItems.find(el=> !previousItems.map(x=>x.id).includes(el.id))

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

Issue with mouseMove function not aligning correctly with object-fit:contain CSS property

My current code allows users to select a color from an image when hovering over the pixel with the mouse. However, I am encountering an issue where the colors do not map correctly when using object-fit: contain for the image. The script seems to be treatin ...

Tips for comparing a key's value to another key's value within the same array

Apologies for what might seem like a basic question, but my PHP learning process is being delayed due to my workload. Imagine having a variable for the file extension and an array in PHP structured like this: $fileExt = ".php"; $mainNav = array( "p ...

The necessary parameters are not provided for [Route: sender] with the [URI: {name}/{code}]. The missing parameters are name and code

I have encountered a problem while using AJAX and I am struggling to find a solution. Routes: web.php Route::get('/{name}/{code}', 'TestController@counter'); Route::post('/{name}/{code}', 'TestController@sender')-&g ...

Is it possible to manually input values when printing a PDF instead of pulling them from the main HTML?

I am facing a challenge in adding a "Print PDF" option to my website because it is built using Ext.js, and therefore the code is not in HTML. Despite searching for ways to print a PDF from the site, all solutions I found involve using HTML. Is there any li ...

I keep encountering this issue while attempting to retrieve information from an SQL server on a website

Error: There was an issue with the query. The table 'jeanpaulcaruana1bsc5m.tbl_' does not exist. PHP require_once("connection.php"); $connection = connectToMySQL(); $query = "select * from tbl_ members"; $result = mysqli_query($connection, $qu ...

Implementing Reverse Sorting Feature with a Second Click in JavaScript

I've implemented a function that successfully sorts a JSON array when a link is clicked (the function is triggered by an onclick event). Here's the current sorting function in action: function sortArch(a, b) { x = eval("a." + sort_type).to ...

Unable to retrieve props from server-side page to client-side component in a Next.js application router

Currently, I am utilizing app router alongside Next.js version 13.5. Within my /dashboard page (which is a server component), there is an ApiKeyOptions client component embedded. However, when attempting to pass props from the dashboard page to the ApiKeyO ...

Looking for assistance on how to use Express JS to make a post request to insert data with an array of objects into a database. Can anyone provide guidance?

While utilizing ExpressJS for serverside functionality, I encountered an issue when making a post call with multiple objects in an array. The error message displayed is as follows: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to t ...

The error of "Unhandled Rejection (TypeError): respo.json is not a function" has occurred

Looking for some help as a React beginner. I'm encountering an error message stating Unhandled Rejection (TypeError): respo.json is not a function. import React, { useEffect } from "react"; import { useState } from "react"; import ...

Eliminating the dependency on Angular $http in a custom JavaScript library

Is there a way to develop a versatile JavaScript library that can be utilized across different frameworks, while still being able to leverage Angular's $http service when necessary? Would it be feasible to incorporate jQuery as a fallback for other fr ...

All fields in the form are showing the same error message during validation

This is the HTML code: The form below consists of two fields, firstname and lastname. Validation Form <form action="" method="post"> Firstname : <input type="text" placeholder="first name" class="fname" name="fname" /> <span class= ...

JSON.stringify not behaving as anticipated

I am working on the code below; var data = []; data['id'] = 105; data['authenticated'] = true; console.log(data); var jsonData = JSON.stringify(data); console.log(jsonData); The initial console.log is displaying; [id: 105, authenti ...

Steps for creating a herringbone design on an HTML canvas

Seeking Help to Create Herringbone Pattern Filled with Images on Canvas I am a beginner in canvas 2d drawing and need assistance with drawing mixed tiles in a cross pattern (Herringbone). var canvas = this.__canvas = new fabric.Canvas('canvas' ...

Enhance your website with a dynamic header effect that smoothly transitions on scroll, utilizing the

When my page loads, I have a header that is positioned absolutely. I want to make it fixed at a certain point when scrolling, which works fine. The issue arises when trying to add an effect to the header (such as displaying with a delay from the top) whil ...

Working with HTML5 Canvas to Clip Images

Is there a way to implement a tileset image in canvas like this one? I am trying to figure out how to make it so that clicking on the first tile returns 0, clicking on the tenth tile returns 9, and so on... Any suggestions on how to clip a tileset on an ...

What is the best way to automatically refresh a Django page only when necessary?

After exploring how to update a Django page without reloading it on Stack Overflow, I have been utilizing JavaScript to send XMLHTTPRequests from the browser to the server in order to retrieve specific parts of the webpage that may change during my applica ...

Whenever I try to utilize the "ng-list" in JavaScript, I encounter issues accessing the variable model

HTML <input type="text" ng-list ng-model="OtherHobby" />{{OtherHobby}} <br /> {{AllHobbys}} Javascript $scope.OtherHobby = []; $scope.AllHobbys = $scope.OtherHobby; I ran a test on this piece of code. The variable "OtherHobby" w ...

How can I append a string to a JSON array in Python?

Recently, I came across a data.json file { "names": [ { "firstnames": ["Jim", "Joe", "Emma"] } ] } My goal is to update the existing list of names in "firstnames". For example, ...

Display a featherlightbox popup when the page loads

Well, here's the deal. I don't have any experience with wordpress php coding at all, but I can make basic adjustments using the wordpress admin. Now I've run into an issue. I tried to use the feather lightbox js, and below is a snippet of co ...

The attempt to generate a .zip file using Node.js with Egg framework was unsuccessful

I developed a Node.js service using Egg framework to send a local .zip file (compressed directory) to the browser, but encountered an issue. Below is the code snippet: Egg.js // Code for zipping files async download() { const ctx = this.ctx; co ...