The process of comparing two arrays of objects in es6 and filtering out the unmatched arrays

Question

The process of comparing two arrays of objects in es6 and filtering out the unmatched arrays

In my Angular application, I'm attempting to retrieve only the updated array that was modified from the user interface.

Within this scenario, I have two arrays in which one of the role names has been changed. My goal is to compare and extract the modified object, returning only those arrays that have been modified (specifically, where the role_name values were altered).

I've made an attempt at filtering using ES6 methods, but it doesn't seem to be functioning correctly.

Could someone assist me in identifying where I may be making a mistake?

var arr1 = [ {
  "num" : null,
  "role_name" : "ABC",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "1",
  "user_name" : "Rywan"
},
{
  "num" : null,
  "role_name" : "DEF",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "2",
  "user_name" : "adecg"
},
{
  "num" : null,
  "role_name" : "GHJ",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "3",
  "user_name" : "dde"
},
{
  "num" : null,
  "role_name" : "RRT",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "4",
  "user_name" : "kumar"
},
{
  "num" : null,
  "role_name" : "SFR",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "5",
  "user_name" : "SASI"
}
];

var arr2 = [ {
  "num" : null,
  "role_name" : "ABC",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "1",
  "user_name" : "Rywan"
},
{
  "num" : null,
  "role_name" : "ROLE_CHANGED",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "2",
  "user_name" : "adecg"
},
{
  "num" : null,
  "role_name" : "GHJ",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "3",
  "user_name" : "dde"
},
{
  "num" : null,
  "role_name" : "RRT",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "4",
  "user_name" : "kumar"
},
{
  "num" : null,
  "role_name" : "SFR",
  "profile" : "ff",
  "user" : "1234",
  "rn" : "5",
  "user_name" : "SASI"
}
];

   let filteredData;
     filteredData = arr1.filter(function(o1){
      //filter out (!) items in arr2
       return arr2.some(function(o2){
           return o1.role_name !== o2.role_name;  
      });
   });
   
   console.log(filteredData);

The desired output should be:

[
{
      "num" : null,
      "role_name" : "ROLE_CHANGED",
      "profile" : "ff",
      "user" : "1234",
      "rn" : "2",
      "user_name" : "adecg"
    }
]

javascript arrays angular typescript ecmascript-6

Answer 1

Answer №1

It seems your reasoning is a bit flawed as the .some() method will always return true since there will be at least one element that is different. The actual check you need to perform is to see if any of the role names match. When no matches are found (i.e., .some() returns false), then you can conclude that the role_name has been altered:

const filteredData = arr2.filter((o1, i) => {
  return !arr1.some((o2) => {
    return o1.role_name === o2.role_name;
  });
});

var arr1 = [{
    "num": null,
    "role_name": "ABC",
    "profile": "ff",
    "user": "1234",
    "rn": "1",
    "user_name": "Rywan"
  },
  {
    "num": null,
    "role_name": "DEF",
    "profile": "ff",
    "user": "1234",
    "rn": "2",
    "user_name": "adecg"
  },
  {
    "num": null,
    "role_name": "GHJ",
    "profile": "ff",
    "user": "1234",
    "rn": "3",
    "user_name": "dde"
  },
  {
    "num": null,
    "role_name": "RRT",
    "profile": "ff",
    "user": "1234",
    "rn": "4",
    "user_name": "kumar"
  },
  {
    "num": null,
    "role_name": "SFR",
    "profile": "ff",
    "user": "1234",
    "rn": "5",
    "user_name": "SASI"
  }
];

var arr2 = [{
    "num": null,
    "role_name": "ABC",
    "profile": "ff",
    "user": "1234",
    "rn": "1",
    "user_name": "Rywan"
  },
  {
    "num": null,
    "role_name": "ROLE_CHANGED",
    "profile": "ff",
    "user": "1234",
    "rn": "2",
    "user_name": "adecg"
  },
  {
    "num": null,
    "role_name": "GHJ",
    "profile": "ff",
    "user": "1234",
    "rn": "3",
    "user_name": "dde"
  },
  {
    "num": null,
    "role_name": "RRT",
    "profile": "ff",
    "user": "1234",
    "rn": "4",
    "user_name": "kumar"
  },
  {
    "num": null,
    "role_name": "SFR",
    "profile": "ff",
    "user": "1234",
    "rn": "5",
    "user_name": "SASI"
  }
];

const filteredData = arr2.filter((o1, i) => {
  return !arr1.some((o2) => {
    return o1.role_name === o2.role_name;
  });
});

console.log(filteredData);

Answer 2

It seems your reasoning is a bit flawed as the .some() method will always return true since there will be at least one element that is different. The actual check you need to perform is to see if any of the role names match. When no matches are found (i.e., .some() returns false), then you can conclude that the role_name has been altered:

const filteredData = arr2.filter((o1, i) => {
  return !arr1.some((o2) => {
    return o1.role_name === o2.role_name;
  });
});

var arr1 = [{
    "num": null,
    "role_name": "ABC",
    "profile": "ff",
    "user": "1234",
    "rn": "1",
    "user_name": "Rywan"
  },
  {
    "num": null,
    "role_name": "DEF",
    "profile": "ff",
    "user": "1234",
    "rn": "2",
    "user_name": "adecg"
  },
  {
    "num": null,
    "role_name": "GHJ",
    "profile": "ff",
    "user": "1234",
    "rn": "3",
    "user_name": "dde"
  },
  {
    "num": null,
    "role_name": "RRT",
    "profile": "ff",
    "user": "1234",
    "rn": "4",
    "user_name": "kumar"
  },
  {
    "num": null,
    "role_name": "SFR",
    "profile": "ff",
    "user": "1234",
    "rn": "5",
    "user_name": "SASI"
  }
];

var arr2 = [{
    "num": null,
    "role_name": "ABC",
    "profile": "ff",
    "user": "1234",
    "rn": "1",
    "user_name": "Rywan"
  },
  {
    "num": null,
    "role_name": "ROLE_CHANGED",
    "profile": "ff",
    "user": "1234",
    "rn": "2",
    "user_name": "adecg"
  },
  {
    "num": null,
    "role_name": "GHJ",
    "profile": "ff",
    "user": "1234",
    "rn": "3",
    "user_name": "dde"
  },
  {
    "num": null,
    "role_name": "RRT",
    "profile": "ff",
    "user": "1234",
    "rn": "4",
    "user_name": "kumar"
  },
  {
    "num": null,
    "role_name": "SFR",
    "profile": "ff",
    "user": "1234",
    "rn": "5",
    "user_name": "SASI"
  }
];

const filteredData = arr2.filter((o1, i) => {
  return !arr1.some((o2) => {
    return o1.role_name === o2.role_name;
  });
});

console.log(filteredData);

Answer 3

Answer №2

This solution offers a slightly different approach compared to what we have seen before.

By utilizing Object.keys() along with filter(), we can compare the properties of role_name based on array indexes to identify changes such as

arr1[index].role_name !== arr2[index].role_name

. This method will pinpoint all indexes where values have changed. Subsequently, using map(), we can create a new array for those elements according to the identified keys in the array.

Therefore, the proposed solution is:

Object.keys(arr1).filter(index => arr1[index].role_name !== arr2[index].role_name)
                 .map(index => arr2[index]);

Object.keys():

The Object.keys() method returns an array of property names from a given object that are enumerable, following the same order as a regular loop iteration would provide.

Array.prototype.filter():

The filter() method generates a new array containing elements that successfully pass the provided function's test conditions.

Array.prototype.map():

Using map(), a new array is formed with outcomes derived from applying the specified function to every element within the calling array.

I suggest giving this implementation a try:

const arr1 = [{...},{...},...];
const arr2 = [{...},{...},...];

const changedObjects = Object.keys(arr1).filter(index => arr1[index].role_name !== arr2[index].role_name)
                                        .map(index => arr2[index]);
   
console.log(changedObjects);

I trust this explanation proves beneficial to you!

Answer 4

This solution offers a slightly different approach compared to what we have seen before.

By utilizing Object.keys() along with filter(), we can compare the properties of role_name based on array indexes to identify changes such as

arr1[index].role_name !== arr2[index].role_name

. This method will pinpoint all indexes where values have changed. Subsequently, using map(), we can create a new array for those elements according to the identified keys in the array.

Therefore, the proposed solution is:

Object.keys(arr1).filter(index => arr1[index].role_name !== arr2[index].role_name)
                 .map(index => arr2[index]);

Object.keys():

The Object.keys() method returns an array of property names from a given object that are enumerable, following the same order as a regular loop iteration would provide.

Array.prototype.filter():

The filter() method generates a new array containing elements that successfully pass the provided function's test conditions.

Array.prototype.map():

Using map(), a new array is formed with outcomes derived from applying the specified function to every element within the calling array.

I suggest giving this implementation a try:

const arr1 = [{...},{...},...];
const arr2 = [{...},{...},...];

const changedObjects = Object.keys(arr1).filter(index => arr1[index].role_name !== arr2[index].role_name)
                                        .map(index => arr2[index]);
   
console.log(changedObjects);

I trust this explanation proves beneficial to you!

The process of comparing two arrays of objects in es6 and filtering out the unmatched arrays

Answer №1

Answer №2

Similar questions

Implement functionality in Angular to perform tasks when the page is reloaded

Retrieving a portion of a file using Jquery ajax

What is the process to enable mandatory validation after a change in input in Angular 4?

What is the best way to locate all mesh faces that are being lit up by a SpotLight

The Typescript module in question does not contain any exported components or functions related to

The app constantly requests permission for geolocation services

Exploring the Interaction of HashLocationStrategy and Query Parameters in Angular 4

Angular functions are executed twice upon being invoked within the html file

How can I eliminate the blinking cursor that appears after selecting an option from a dropdown using ng-select in Angular?

The specified module could not be located:

Learn how to manipulate data within a MongoDB database schema using Node.js and Mongoose: inserting, saving, and updating records

What is the best way to sum up array elements until they equal a target number, and then create objects using these summed values?

Is there a way to transmit a div using Node.js?

Retrieve a result from an observable within a function

Frustrated with the endless page loading caused by three.js

getting rid of the angular hash symbol and prefix from the anchor tag

Give a discount to each object in an array based on whichever object has the highest paid value in the loop

Module 'serviceAccountKey.json' could not be located

The error message "E/Web Console(8272): Uncaught ReferenceError: functionName is not defined:1" popped up when trying to load web views within a

Incorporating XMLHttpRequest in my React Typescript App to trigger a Mailchimp API call, allowing users to easily sign up for the newsletter