How to compare and filter only unmatched arrays from two array of objects in es6

Question

In my Angular Application, I'm trying to get only the updated array which was modified from UI.

Here, I have two array where one of the role_name is changed. I wanted to compare and filter out the modified object and return only those modified arrays. (in this case, role_name values are modified)

I have tried filtering out with the help of ES6, but its not working.

Can someone help me where am I missing?

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);

output should be

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

If the order of elements in both of the arrays is expected to be the same, you can just do the following: const filteredData = arr2.filter((item, index) => item.role_name !== arr1[index].role_name); — decho
– decho, Commented Jan 7, 2020 at 13:14
you could use underscore library stackoverflow.com/questions/28632281/… — deepak thomas
– deepak thomas, Commented Jan 7, 2020 at 13:19

Terry · Accepted Answer · 2020-01-07 13:17:19Z

Your logic is a little flawed, because your .some() will always return true since there is always one element that will be different. What you want is to do actually check if any one of the role names are identical. When no matches are found (i.e. .some() returns false), then you know that role_name has been changed:

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);

norbitrial · Accepted Answer · 2020-01-07 13:30:04Z

A bit different solution what we have already.

On Object.keys() using filter() we can also compare role_name properties based on arrays' indexes if the value has changed like arr1[index].role_name !== arr2[index].role_name. This will return all the indexes of the array where we have changed values. Then with map() generating a new array for those elements based on the found array keys.

So the solution would be:

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 a given object's own enumerable property names, in the same order as we get with a normal loop.

Array.prototype.filter():

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Array.prototype.map():

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

I think you can try the following:

const 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"
}];

const 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 changedObjects = Object.keys(arr1).filter(index => arr1[index].role_name !== arr2[index].role_name)
                                        .map(index => arr2[index]);
   
console.log(changedObjects);

I hope that helps!

Collectives™ on Stack Overflow

How to compare and filter only unmatched arrays from two array of objects in es6

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related