JavaScript function Array.prototype.includes() doesn't work in for loop

Question

I have a web app that tracks your purchases and displays different statistics. In one of the pages I have jQuery ajax requests that load a user's purchases from an API call. Then all the purchases are put into a global array, called G_PURCHASES, as JavaScript objects.

So far so good. Then I call a function that uses jQuery's Deferred() to make it chainable; it iterates G_PURCHASES and gets all distinct purchase.item.category's (take a look at the purchase object's relevant structure) by checking if G_PURCHASES[i].item.category is included in another global array called G_CATEGORIES by using Array.includes(). And if it is not then push() it into G_CATEGORIES.

The error I have a problem with is that even after a category object has been pushed into the G_CATEGORIES array, the Array.includes() check still returns false, every time. Check the relevant code and output to clear it up.

// Relevant structure of the purchase object
purchase = {
  item: {
    category: {
      categoryID: int,
      name: string
    }
}

// Relevant code

var G_PURCHASES = []; // array declared globally
// it is successfully filled with @purchase objects from another function

var G_CATEGORIES = []; // array declared globally
// to be filled by @LoadAllCategories

var LoadAllCategories = function() {

  // make a jQuery Deffered
  let func = $.Deferred(function() {

    let allP = G_PURCHASES; // make a shortcut
    let allC = C_CATEGORIES; // make another shortcut
    for (var i = 0; i < allP.length; i++) {

      // get whether the current purchase.item.category
      // already exists in allC array
      let exist = allC.includes(allP[i].item.category);

      // console.log the above result
      console.log('i = ' + i + ', category exists = ' + exist);

      // if it doesn't exist then push it in
      if (!exist) allC.push(allP[i].item.category);
    }

    this.resolve();

  });

  return func;
}

// Input
G_PURCHASES has 6 @purchase objects with 3 unique item.category 'ies

// Output
i = 0, category exists = false
i = 1, category exists = false
i = 2, category exists = false
i = 3, category exists = false
i = 4, category exists = false
i = 5, category exists = false

// Result
G_CATEGORIES contains duplicate categories

I tried to use Array.indexOf() and jQuery's $.inArray() with no success. No matter what I console.log() I can't seem to find where the error lies. So, if you can tell me why does Array.includes() doesn't work inside this for loop I will find you and I will buy you a beer!

Why not do console.log(allC, allP[i]) and see what you've got. — adeneo
– adeneo, Commented Oct 7, 2017 at 13:43
I get an Array and an Object, just as expected: Array [ ] Object { item: Object } Array [ Object ] Object { item: Object } Array [ Object, Object ] Object { item: Object } and so on — ful-stackz
– ful-stackz, Commented Oct 7, 2017 at 13:47

justadudewhohacks · Accepted Answer · 2017-10-07 13:49:32Z

3

Well includes checks for referential equality, so there might be two objects with same properties and values, but still they are different objects, thus their reference is not equal. You probably want to check every category object for their categoryID and name manually to find duplicates.

answered Oct 7, 2017 at 13:49

justadudewhohacks

6814 silver badges13 bronze badges

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

1 Comment

ful-stackz Over a year ago

A simple secondary loop iterating the Categories array and checking for categoryID match fixed everything! Thank you!

Collectives™ on Stack Overflow

JavaScript function Array.prototype.includes() doesn't work in for loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related