Javascript Array elements disappearing

Question

I am completely baffled by the error that I am running into. I have been trying for hours to find a way around this, I wonder if anyone has seen anything like this before or knows what's going on.

Basically what is happening is that I have 2 arrays that are populated with objects. I want to look at them and check if all of the elements of the 2nd array (compare in the compareArrays() function) exist in the 1st array (myArray). If there are multiple instances of the same object in the compare array there should be the same number in the first.

I am using Angular with Typescript. Here is my code:

/*
 * I get todaysItems a little higher in the constructor from a different service. It looks
 * like this: 
 *       {
 *           day: "Monday",
 *           price: 5.00,
 *           items_name: "1/4 Pounder with Cheese and Chips",
 *           items: [
 *               {name: "1/4 Pounder with Cheese", price: 4.50},
 *               {name: "Small Chips", price: 2.50}
 *           ],
 *           ad_hoc_price: 7
 *       }
 */
private todaysItems: Item[] = [];

compareArrays (myArray: Item[], compare: Item[]) {
    var self = this;
    if (compare.every(function(val) {
        var index = self.arrayObjectIndexOf(myArray, val.name, "name");
        if (index !== -1) {
            myArray.splice(index, 1);
            return true;
        } else {
            return false;
        }
    })) {
        return true;
    } else {
        return false;
    }
}

arrayObjectIndexOf(myArray, searchTerm, property) {
    for(var i = 0, len = myArray.length; i < len; i++) {
        if (myArray[i][property] === searchTerm) {
            return i;
        }
    }
    return -1;
}

/*
 * The cart has a property items_in_cart which is working fine, I can add elements to it
 * and remove them with no issue.
 */

addItem (item: Item, totalPrice: number, cart: Cart) {
    totalPrice += item.price;
    cart.items_in_cart.push(item);
    return {
        newPrice: totalPrice,
        newCart: cart
    }
}

Ok, so the addItem() function works fine, just like expected. But the bizarre thing is that when I change it so it looks like

addItem (item: Item, totalPrice: number, cart: Cart) {
    totalPrice += item.price;
    cart.items_in_cart.push(item);
    console.log(this.compareArrays(cart.items_in_cart, this.todaysItems));
    return {
        newPrice: totalPrice,
        newCart: cart
    }
}

Just adding that little console.log() which calls my compareArrays() function kicks all of the elements of this.todaysItems out of cart.items_in_cart. It is super bizarre and I have no idea what is happening.

Any ideas?

Read the post multiple times. didnt get the context. Revise it — Aravind
– Aravind, Commented Apr 18, 2017 at 0:22
I just added a little explanation at the top, does that make it any clearer? — Will
– Will, Commented Apr 18, 2017 at 0:28
You have a compareArrays function that is evil. That is why. Specifically, it does not do what it claims. It is like "If we find a match, then we start destroying stuff!". If a function does that it should not be named compareArrays. — Aluan Haddad
– Aluan Haddad, Commented Apr 18, 2017 at 0:28
Modify price for item's in myArray that are todays special items(price discounted). Do you want achieve this — Aravind
– Aravind, Commented Apr 18, 2017 at 0:32
The thing is that I have to make sure that everything in the second array matches, for example if the array I'm checking is [1, 2, 3] and I am comparing it against [1, 2, 2, 3] what the code should be doing is going through a copy of the array taking out each element as it finds it, then when it sees that there is not a 2nd 2 it will return false, whereas if it just goes through without taking the elements out of the first array it would check the same 2 twice and pass it both times. I don't know if that makes any sense. — Will
– Will, Commented Apr 18, 2017 at 0:44

basarat · Accepted Answer · 2017-04-18 00:48:58Z

2

Just adding that little console.log() which calls my compareArrays() function kicks all of the elements

The compareArrays function mutates its array arguments e.g.

compareArrays (myArray: Item[], compare: Item[]) {
    var self = this;
    if (compare.every(function(val) {
        var index = self.arrayObjectIndexOf(myArray, val.name, "name");
        if (index !== -1) {
            myArray.splice(index, 1); // HERE

Since compareArrays is not a pure function you can expect arrays to be changed by calling it.

answered Apr 18, 2017 at 0:48

basarat

278k60 gold badges475 silver badges528 bronze badges

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

2 Comments

Will Over a year ago

How would I go about avoiding that? I changed it to add var tempArray = myArray; then did the splice on that, but I get the same behavior.

basarat Over a year ago

The proper way to clone an array : var tempArray = myArray.slice() 🌹

Collectives™ on Stack Overflow

Javascript Array elements disappearing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related