What is the best way to ascertain the variance between two Immutable.js Maps?

I currently have two unchangeable maps:

const initial_map = Map({x: 10, y: 20)}
const updated_map = Map({x: 15, y: 20)}

Can anyone advise on how to find the changes between the two maps? The expected outcome should be:

Map({x: 15}) 

Answer №1

One way to approach this is by utilizing the Map.filter() function, also known as Collection.Keyed.filter(), on the second map with a specific condition: each element in this Map should not have a matching key in the other Map. Here's an example:

const Map = Immutable.Map;

const first_map = Map({a: 1, b: 2, c: 4});
const second_map = Map({a: 1, b: 3, d: 5});

const diff = second_map.filter((v, k) => first_map.get(k) !== v);

console.log(diff.toString()); // Map { "b": 3, "d": 5 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js"></script>

In cases where there might be undefined values in the Map, it's recommended to first check using has, as Map.get(key) will return undefined for non-existent keys. However, using null instead of undefined is preferable for clarity and consistency.

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

A clock for counting down on statically produced websites

It seems that I have encountered a limitation of statically generated sites. Currently, I am utilizing Gatsby to generate pages in a static manner. The process involves: Pulling data from the CMS where we set an end time for a countdown timer, such as two ...

`HTTP Streaming with Axios in a Node JS Environment`

I am currently facing an issue while attempting to stream price data via HTTP (I'm surprised they aren't using websockets..). I usually use axios for making REST API requests, however, I am struggling to handle 'Transfer Encoding': &apo ...

The React component continuously refreshes whenever the screen is resized or a different tab is opened

I've encountered a bizarre issue on my portfolio site where a diagonal circle is generated every few seconds. The problem arises when I minimize the window or switch tabs, and upon returning, multiple circles populate the screen simultaneously. This b ...

Tips for utilizing document.write() with a document rather than just plain text

Currently, I am utilizing socket.io to develop a party game that shares similarities with cards against humanity. My main concern is how to retain the players' names and scores without needing to transmit all the data to a new page whenever new games ...

How to handle an unexpected keyword 'true' error when using the `useState` hook in React?

Trying to set the open prop of the MUIDrawer component to true on user click is causing an error stating "Unexpected keyword 'true'" import React, { useState } from "react"; import { withRouter } from "react-router-dom"; impo ...

What is a way to utilize Javascript in order to copy a JSON object by referencing a specific key within the object?

If you had the following JSON object example given, how could you utilize Javascript to replicate each object based on the value indicated in the "Count" key? Example Input: [ { "name":"David", "Count":2 }, { "name":"John", "Count":3 }, ] Desired Out ...

Import a precise model from a glb file

Greetings! I am relatively new to working with ThreeJS and just getting the hang of it. After going through some tutorials, I have successfully managed to load glb files and render them in my browser with ease. Recently, I downloaded a GLB file from that ...

Access information through the restful api using the angularjs service $resource

I am attempting to utilize the $resource service with the surveygizmo API. Here is my code: HTML : <div ng-app="Survey"> <body> <div ng-controller="SurveyCtrl"> {{survey.data.title}} </div> </body> </div> My scr ...

Retrieve information from a JSON file within a Vue.js application rather than entering data manually

I am venturing into the world of Vue.js for the first time. I have created an app that currently relies on manually added data within the script. Now, I am looking to enhance it by fetching data from a JSON file, but I'm unsure about how to proceed wi ...

What is causing the unexpected behavior of deferred.resolve in the q manual?

I can't seem to grasp this concept and it might be a silly question. Let's analyze the code snippet below: function throwError() { throw Error("can't touch this."); } var def = q.defer(); def.promise.then( function() { co ...

Tips for maintaining server session by tracking user activity on the browser using a simple ajax request to the server without relying on JQuery

In my website, the server session Timeout is set to 30 minutes. <system.web> <sessionState timeout="30" /> </system.web> However, if a user is actively engaging with the site by typing a long comment or selecting chec ...

Passing data back from an asynchronous function to its parent function in Node.js

Exploring the world of asynchronous programming is a new adventure for me as I delve into implementing Twilio video calls through Node.js. I've been grappling with calling a server-side function that in turn invokes another asynchronous function retu ...

Displaying error messages on a form that uses ng-repeat in Angular

I am trying to dynamically generate input fields using ng repeat in Angular, but I am encountering an issue where error messages only appear on the last element. How can I make these error messages apply to each individual element? <form name="setPla ...

Execute and showcase code without redundancies

I have been exploring a way to store JavaScript code within an object and execute specific parts of it upon the user clicking a button. Here's what I've come up with so far: var exampleCode = { test: "$('body').css('background ...

The JSON response is not being returned by the static React App hosted on Microsoft

Seeking assistance from anyone who may have faced and resolved a similar issue. Our React application is deployed on Azure Static Web App and operates smoothly, but we are stuck on configuring it to return JSON instead of HTML in its responses. Within our ...

prioritizing the loading of the header in an Angular application before proceeding to load the main content

My website has a basic layout shown below: |-------------------| | HEADER | |___________________| |------||-----------| | side || Main | | bar || Content | | || | |------||------------ For routing and states, I am using ...

Button halts the playback of numerous audio tracks simultaneously

I'm in the process of creating a Launchpad, where each row consists of 8 buttons/audio tracks and a stop button. My goal is for each stop button to halt all audio playing on that specific row when pressed—for instance, pressing Stop Button 1 would c ...

When making an Ajax request, the response is received successfully, however, the success, complete, and error

I am attempting to retrieve SQL results from a database using an AJAX call and display them on another PHP page. Here is my AJAX call code: function newfunc(){ start += 10; var params = parseURLParams(document.URL); var datastring = "nextStart="+start+"&a ...

Animate a div to sense whether it has reached the top or bottom position

Is it possible for a div to animate when it reaches almost halfway while scrolling? I'm looking to achieve this effect on a sticky sidebar, similar to how it works on this website: sample This is the code I have: $(function(){ // document ready ...

Retrieving values from a jQuery object array using keys rather than array indices

I am facing a challenge where I need to extract values from an object returned through $.post, but the order of the arrays can vary. Therefore, I must retrieve them based on their keys which are nested inside the array. An example is provided below. { Id: ...