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

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

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

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

Share Improve this question edited Jan 7, 2020 at 13:33 norbitrial 15.2k10 gold badges39 silver badges64 bronze badges asked Jan 7, 2020 at 13:06 UI_Dev 3,42718 gold badges53 silver badges93 bronze badges

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 Commented Jan 7, 2020 at 13:14
you could use underscore library stackoverflow./questions/28632281/… – deepak thomas Commented Jan 7, 2020 at 13:19

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

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

A bit different solution what we have already.

On Object.keys() using filter() we can also pare 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!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to compare and filter only unmatched arrays from two array of objects in es6 - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)