Javascript - how to detect difference from two arrays

Question

Sorry for the maybe misleading title.

I have two arrays, one contains the defaults and another one contains products.

What I am trying to do is compare the two so that you can add/remove as many products as you like, but you can't have less products as the default.

Lets say

default = [1,2]

products = [1,1,1,1,2,2,2,3,4,5,6,7,8,9]

this should work.

But you can't have something like this:

default = [1,2]

products = [2,2,2,3,4,5,6,7,8,9]

because at least the same amount of products in the default array is required, and in the last example, 1 is not included in the products array.

I am using this to compare the two arrays:

Array.prototype.containsArray = function ( array /*, index, last*/ ) {

    if( arguments[1] ) {
        var index = arguments[1], last = arguments[2];
    } else {
        var index = 0, last = 0; this.sort(); array.sort();
    };

    return index == array.length
        || ( last = this.indexOf( array[index], last ) ) > -1
        && this.containsArray( array, ++index, ++last );

};

arr1.containsArray( arr2 )

which works. In my function (the one used to add/remove products) I tried to have the check like this:

removeDeviceToZone = function(zone, ID) {
  if (products.containsArray(default) {
    return products = removeFromArray(products, ID);
  }
};

but the problem is that at the time the check is executed, the array is still correct, but it won't be anymore as soon as a product is removed. What's the best way to have the check prevent what the array will be after removing the item without really removing it yet? Is it even possible? is it the best approach to do this? thanks

asking same before it removed, and prevent to make remove if is not. There is any code that makes the remove? — Álvaro Touzón
– Álvaro Touzón, Commented Jul 26, 2017 at 9:49
@VarunSharma default is only here for explain, I am not using default as a name in my code — Nick
– Nick, Commented Jul 26, 2017 at 9:49

Mihai Alexandru-Ionut · Accepted Answer · 2017-07-26 10:05:45Z

2

You should use every function which accepts a callback provided method applied on every item in the array.

The every() method tests whether all elements in the array pass the test implemented by the provided function.

function containsArray(defaultArray, products){
    return defaultArray.every(function(item){
      return products.indexOf(item)!=-1;
    });
}
let defaultArray = [1,2]
let products = [1,1,1,1,2,2,2,3,4,5,6,7,8,9];
let products2=[2,2,2,3,4,5,6,7,8,9];
let contains=containsArray(defaultArray,products);
let contains2=containsArray(defaultArray,products2);
console.log(products.toString()+'->'+contains);
console.log(products2.toString()+'->'+contains2);

When you delete items you should check if the containsArray keeps to be true. In the other words you have to check if the containsArray function returns true after remove element.If yes, return products. Otherwise, return the old products array.

removeDeviceToZone = function(zone, ID) {
   let productsCopy=products;
   let products=removeFromArray(products, ID);
   if (containsArray(default,products) && containsArray(default,productsCopy) {         
      return products;
   }
   else
      return productsCopy;
};

edited Jul 26, 2017 at 10:05

answered Jul 26, 2017 at 9:51

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nick Over a year ago

Just to clarify, to use this I should have something that checks that the index of item is not -1? sorry I am a bit confused on how this would work

Mihai Alexandru-Ionut Over a year ago

@Nick, indexOf method returns some values, -1 means that an item not exists in one array.

Nick Over a year ago

ok, so item will be the id I am trying to remove, and if it is -1, I remove it? isn't it already removed to return -1?

Nick Over a year ago

oh ok, I also had to copy it. Ok, clear now. I'll give it a go, thanks

Nick Over a year ago

Thanks. It works perfectly fine. I had to spend a bit of time adjusting it, but it's working. Thank you very much

Ajay Gupta · Accepted Answer · 2017-07-26 09:51:19Z

0

Simply putting,

Clone the original array in another variable (clonedArray) and compare the two after you are done deleting.

:)

answered Jul 26, 2017 at 9:51

Ajay Gupta

2,0432 gold badges23 silver badges40 bronze badges

Comments

deceze · Accepted Answer · 2017-07-26 09:55:16Z

0

Simplify the logic:

delete whatever you're going to delete
add the default values back in after each delete operation, e.g.:
- for each default, check if it's already in the array and push if not
- optionally sort the result if order matters to you

That's a simple, idempotent operation.

Alternatively, create a class that has the defaults as a property and the user-selected items as a separate property, and which merges both together conditionally as needed whenever necessary, e.g. basket.getMergedBasket().

Alternatively, instead of trying to maintain two lists, make those products objects if they aren't already which have an appropriate flag, e.g.:

products = [{ id: 1, mandatory: true }, ...]

That would be a really simple object oriented approach.

edited Jul 26, 2017 at 9:55

answered Jul 26, 2017 at 9:49

deceze♦

525k89 gold badges806 silver badges954 bronze badges

2 Comments

Nick Over a year ago

The problem is that I'd like to hide the minus button on the front end to prevent user from removing products that cannot be removed, that's why I would like a different approach than remove/add back in again

deceze Over a year ago

Then make those products objects if they aren't already and add a boolean deletable property to them.

Collectives™ on Stack Overflow

Javascript - how to detect difference from two arrays

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related