The issue with Lodash isEqual arises from the constructor specified by Angular

Currently, I am utilizing Lodash _.isEqual for performing a deep comparison between a local JavaScript object and another JavaScript object fetched through angular $get.

The initial code indicates that the objects are not the same:

$get({...}, function (data) {

  cleanupAngularProps(data);

  if (_.isEqual(data, {name: 'Someone'}) {
    ...
  }
});

However, after making a slight adjustment, the code now recognizes them as equal (as expected):

$get({...}, function (data) {

  cleanupAngularProps(data);

  if (_.isEqual(JSON.parse(JSON.stringify(data)), {name: 'Someone'}) {
    ...
  }
});

Upon debugging into the Lodash code, it appears to be failing due to the different constructors in both objects.

Is there a way to resolve this issue without having to clone the data?

javascriptangularjsconstructorlodash

Answer №1

Although this question is a few years old now, I wanted to share an alternative answer that I believe is more suitable. Instead of comparing the prototypes of the two objects:

var result = _.isEqual(
  _.omit(data, ['__proto__']),
  _.omit({name: 'John'}, ['__proto__'])
);

Answer №2

It may not be conventional, but I managed to fix the issue by resetting the prototype and constructor as shown below.

$fetch({...}, function (result) {

  clearProperties(result);

  result.__proto__ = Object.prototype;

  if (_.isEqual(result, {title: 'Company'}) {
    // Perform necessary actions
  }
});

Answer №3

In order to achieve a thorough comparison while disregarding constructors, the following code can be utilized:

const comparator = (x: any, y: any, identifier: any) => {
            if (_.isObject(x) && _.isObject(y)) {
                // @ts-ignore
                const xPrototype = x.__proto__.constructor.name
                // @ts-ignore
                const yPrototype = y.__proto__.constructor.name
                if (xPrototype != yPrototype) {
                    return _.isEqualWith(_.omit(x, ['__proto__']), _.omit(y, ['__proto__']), comparator)
                }
            }
            return undefined
        }
_.isEqualWith({bar:2}, {bar:2}, comparator)

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

Determine the maximum size of a specified number of square divs that can fit within responsive parent divs

I am working on creating a grid of square divs inside a container with variable height and width. The number of square div's is predetermined. All square divs will have images with the same dimensions (similar to the example). They should align left ...

javascriptjqueryhtmlcss

The AngularJS ngResource factory returns a function instead of a promise, providing a unique method for

Currently, I am working on developing an Angular factory that involves manipulating two sets of data. My objective is to make one set of data equal to a variable so that it can be passed in another API call. However, I'm encountering an issue where th ...

angularjsngresource

HTML5 input type Color displays individual RGB values

This code snippet opens up a variety of options for the user to manipulate different color values such as R, G, B, HEX VALUE, HUE, etc. However, the specific requirement is to only extract the Red value. <input id="color_pick"type="color" value="#ff0 ...

javascripthtml

How is it possible for my search results page to retrieve the words I input?

Currently, I am in the process of creating the search result page and I plan to utilize dynamic routing for implementation. Here is a snippet of my search bar code: <Link href={`/productSearchResult/${searchWord}`}> <a className={styles.navbar_s ...

javascripthtmlreactjsnext.jsdynamic-routing

Error encountered in unit testing of angularJs due to undefined service

I have been encountering this error and have tried various solutions found online, such as the example provided at , but none of them seem to be working. *****app.js var app = angular.module('myApp', ['ui.router','ui.bootstrap&a ...

angularjsunit-testingwebstormkarma-jasmine

Issue with Material UI select component not displaying the label text

I've been struggling with Material UI's "Select" for quite some time now - spent about 10 hours trying to make it work the way I want. Any help would be greatly appreciated. This question is connected to a previous one: Select MenuItem doesn' ...

javascriptreactjsmaterial-ui

passing commands from a chrome extension to a content script

I want to set up a hotkey that will activate a function in my content script. The content script (main.js) is run when the page loads from my popup.js file. I've included the command in my manifest.json and I can see in the console log that it is tri ...

javascripthtmlgoogle-chrome-extensionsendmessagecontent-script

Adding properties to a class object in Javascript that are integral to the class

Recently, I've been contemplating the feasibility of achieving a certain task in JavaScript. Given my limited experience in the realm of JavaScript, I appreciate your patience as I navigate through this. To illustrate what I am aiming for, here' ...

javascriptnode.jstypescriptecmascript-6

Enable the use of empty spaces in ag-grid filter bars

I'm experiencing an issue with the ag grid filter. It seems to be disregarding white spaces. Is there a way to configure the grid to recognize blank spaces in the filter? Any suggestions for resolving this issue? Where can I find the option to accept ...

javascriptangularreactjsvisual-studio-codeag-grid-angular

ag-grid allows for selecting multiple rows without the need to press the Control Key

In order to select a maximum of two rows without pressing the Ctrl button, similar to single row selection behavior, we need to ensure that if the user selects more than two rows, the first selected row is automatically deselected and only the latest two ...

jqueryhtmlangularjsag-grid

Is there a way to use JavaScript to switch the entire div on and off

I have a function called done that I want to use to toggle the visibility of my "temp" division. tasks.innerHTML += `<div id="temp"> <span id="taskname"> ${input.value} </span> <button class="d ...

javascripthtmlfunctiontoggleinnerhtml

Is there a way to extract both a and b from the array?

I just started learning programming and I'm currently working on creating an API call to use in another function. However, I've hit a roadblock. I need to extract values for variables a and b separately from the response of this API call: import ...

javascripttypescript

Concealing a Div element without the use of Jquery or JavaScript

I have an Upper and Lower div in my HTML code. I am trying to display the Lower div only if the Upper div is present, otherwise hide it. Is there a way to achieve this using CSS without using Jquery or Javascript? Note: No modifications should be made t ...

javascriptjquerycss

Changing a d3 event from JavaScript to Typescript in an Angular2 environment

I am a beginner in Typescript and Angular 2. My goal is to create an Angular2 component that incorporates a d3js tool click here. However, I am facing challenges when it comes to converting it to Typescript. For instance, I am unsure if this code rewrite ...

javascriptangulard3.jstypescript

Tips for retrieving a value from fs.accessAsync function

I am currently working on verifying the accessibility of a specific file, folder, or directory for reading purposes. I have implemented the code below, which functions properly. However, there are a couple of aspects that I would like to inquire about: 1. ...

javascriptnode.jsfs

How can I include a nested object in an ng-repeat loop in Angular?

I'm new to using Angular so please excuse my basic question. Here is the structure of my model for posts and comments: [ { "title": "awesome post", "desc": "asdf", "comment_set": [ { "id": 2, ...

javascriptangularjsangular-module

Strange actions observed in AJAX POST request

This code snippet functions perfectly when I set a breakpoint in the backend and allow the value to be zero before continuing with the rest of the code. However, if I don't set a breakpoint and let it run, the value will become 2 and cause a break in ...

javascriptjqueryajaxasp.net-mvc

Extracting data on an AngularJS platform by using web scraping techniques

I have been working on an AngularJS application that currently retrieves JSON data from an API using http.get, and it's been working really well. Recently, I've been exploring the idea of passing a URL to a static webpage and scraping the result ...

javascriptangularjs

What are the steps to make ng-show functional in an AngularJS application?

I am attempting to implement a hover effect where an image is displayed over another image upon hovering over its container. I have been trying to achieve this using Angular and ng-show, but for some reason, the image with the ng-show attribute remains hid ...

javascriptangularjsng-show

Utilizing Cowboy as the HTTP web server for Express JS

Many websites are utilizing Cowboy as the HTTP Web server and Express JS as the Web application server. They typically have their HTTP header set to Cowboy for the server, with the X-Powered-By HTTP header indicating Express. One example is This setup rai ...

javascripthttpexpresswebservercowboy