Remove the deleted values from array

Question

I have two arrays such as,

Array 1:

    deletedValuesfromArray =
     [
        { "property_name": "Property three", "property_type": 4, "property_required": true, "property_origin": 2 }, 
        { "property_name": "rstywrtre", "property_type": 3, "property_required": true, "property_origin": 1 }
     ]

Array 2:

  normalArray =
   [
    { "property_name": "Property one", "property_type": 4, "property_required": true, "property_origin": 1 },
     { "property_name": "Property two", "property_type": 5, "property_required": true, "property_origin": 1 }, 
     { "property_name": "Property three", "property_type": 4, "property_required": true, "property_origin": 2 }, 
     { "property_name": "rstywrtre", "property_type": 3, "property_required": true, "property_origin": 1 }
   ]

I would like to compare both arrays and filter the array to get the new one after removing the deletedValuesfromArray (Array 1).

For which i have tried the following,

let newArray = this.normalArray.filter(function (val) {
  return this.deletedValuesfromArray.indexOf(val) == -1;
});
console.log(newArray);

But it doesn't works..

Expected Output is,

New Array

   [
     { "property_name": "Property one", "property_type": 4, "property_required": true, "property_origin": 1 },
     { "property_name": "Property two", "property_type": 5, "property_required": true, "property_origin": 1 }
   ]

Stackblitz that i have tried

The values also will not be unique always it may have a complete duplicate of any object.

How to compare and remove the deleted values from the normal array and get the newarray?

score 1 · Answer 1 · answered Nov 14 '18 at 13:31

Your filter predicate doesn't work because you can't just compare an object from normalArray to an object from deletedValuesfromArray:

indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator).

-- Array.indexOf()

In other words,

{ "property_name": "Property one", "property_type": 4, "property_required": true, "property_origin": 1 } === { "property_name": "Property one", "property_type": 4, "property_required": true, "property_origin": 1 }
// > false

To make the filter work, you need to implement a comparison function. See How to determine equality for two JavaScript objects? for some ideas.

SeleM · Answer 2 · 2018-11-14T14:25:47.800

0

You can proceed with ES6 operators (filter and some) :

 ngOnInit() {
    let newArray = this.normalArray.filter( (val) => {
      return !this.deletedValuesfromArray.some((newval) => {
       return JSON.stringify(newval) === JSON.stringify(val) // check if two objects are the same
      });
    });
    console.log(newArray);
  }

edited Nov 14 '18 at 14:25

answered Nov 14 '18 at 13:33

SeleM

9,310
5
32
51

Here you're assuming that `property_name` values are unique. The OP never said that – shkaper Nov 14 '18 at 13:42
Yes this solution seems to be close to me but the thing is as @shkaper said the values may not be unique at all time.. – Maniraj Murugan Nov 14 '18 at 13:58
3

this is potentially dangerous since object's property order is not guaranteed in JavaScript – shkaper Nov 14 '18 at 14:55
If you need an explanation about why this solution is terrible, please consider how much cpu time is wasted to stringify all those objects. You are also stringifying the same object way too many times with the way this loop works. You are also not taking into account that there is no spec in javascript that says that the order of object properties stays the same. – itsundefined Nov 14 '18 at 20:58

Artyom Amiryan · Answer 3 · 2018-11-14T13:37:03.307

0

one of simple options here you can use JSON.stringify, which will turn objects into strings and compare them as strings, because 2 objects never equal each other by value since it compares them by reference, make sure that your objects keys order are the same

const deletedValuesfromArray =
     [
        { "property_name": "Property three", "property_type": 4, "property_required": true, "property_origin": 2 }, 
        { "property_name": "rstywrtre", "property_type": 3, "property_required": true, "property_origin": 1 }
     ]

  const normalArray =
   [
    { "property_name": "Property one", "property_type": 4, "property_required": true, "property_origin": 1 },
     { "property_name": "Property two", "property_type": 5, "property_required": true, "property_origin": 1 }, 
     { "property_name": "Property three", "property_type": 4, "property_required": true, "property_origin": 2 }, 
     { "property_name": "rstywrtre", "property_type": 3, "property_required": true, "property_origin": 1 }
   ]

const result = normalArray.filter(obj => !deletedValuesfromArray.find(o => JSON.stringify(o) == JSON.stringify(obj)));

console.log(result);

edited Nov 14 '18 at 13:37

answered Nov 14 '18 at 13:34

Artyom Amiryan

2,846
1
10
22

what if the order of keys is different in two same-looking objects? – shkaper Nov 14 '18 at 13:35
@shkaper the order is important in my example, I will update my answer – Artyom Amiryan Nov 14 '18 at 13:36
I can explain the down vote. Using stringify is a terrible solution and the guy that made the question didn't say that he wants to check that the two objects are exactly identical. You should *NEVER* expect that the order of keys is the same. – itsundefined Nov 14 '18 at 20:50
1

@itsundefined from the question it is easy to get that he wants to check that the two objects are exactly identical. Almost all answers contain the same logic, as accepted answer too which marked by question creator, it means we got question right, and I noted that in my example order is important, so I don't see any reason for down vote, it seems you got question wrong and added down votes to answers which have upvote – Artyom Amiryan Nov 14 '18 at 21:02
@itsundefined I'm not using this method for removing objects from array, I'm using this method for comparing objects, 2 different things – Artyom Amiryan Nov 14 '18 at 21:05
https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order . Here is the reason for the downvote – itsundefined Nov 14 '18 at 21:05

score 0 · Answer 4 · answered Nov 14 '18 at 13:36

0

Using lodash :-

npm install --save lodash


import * as _ from "lodash";

var newArray = _.differenceWith(this.normalArray, this.deletedValuesfromArray, _.isEqual);
console.log("newArray", newArray);

answered Nov 14 '18 at 13:36

Chandru

10,864
6
38
53

FYI, lodash is swiss army knife of Javascript. – devansvd Nov 14 '18 at 13:53

score 0 · Answer 5 · answered Nov 15 '18 at 06:15

This might also help you.

function display()
{
  let newArray = this.normalArray.filter(function (val) {
  count = 0;
  var flag = true;
  return this.deletedValuesfromArray.find(function(item, i){
  count++;

     if(val.property_name == item.property_name && val.property_type == item.property_type && val.property_required == item.property_required && val.property_origin == item.property_origin ){
       flag =  false;
     }
     if(count == deletedValuesfromArray.length) {
     return flag;
     }
  });

}); }

Remove the deleted values from array

5 Answers5