Unexpected result with work on js array

Question

I try delete excluded types from my object. And think in should work, but I don't understand, why 'company_accountant' still in the array. And mayby you can help me and advice more elegant way to search and delete excluded types?

var data = [
    {id: 1, type: "exempt_dealer"},
    {id: 2, type: "licensed_dealer"},
    {id: 3, type: "partnership"},
    {id: 4, type: "company"},
    {id: 5, type: "licensed_dealer_accountant"},
    {id: 6, type: "company_accountant"},
    {id: 7, type: "partnership_accountant"}
];

var exclude_types = [
    'company_accountant',
    'licensed_dealer_accountant',
    'partnership_accountant'
];

angular.forEach(data, function (value, key) {
    if(exclude_types.includes(value.type)){
        data.splice(key, 1);
    }
});

data should be:

data = [
    {id: 1, type: "exempt_dealer"},
    {id: 2, type: "licensed_dealer"},
    {id: 3, type: "partnership"},
    {id: 4, type: "company"}
];

but for some reason:

{id: 1, type: "exempt_dealer"},
{id: 2, type: "licensed_dealer"},
{id: 3, type: "partnership"},
{id: 4, type: "company"},
{id: 6, type: "company_accountant"}

I don't know what `angular.forEach` does and why people don't just use `Array.prototype.forEach`, but it looks like you mutate your iterable while iterating, which is likely the cause of the problem (also the item before the one containing "company_accountant" is to be deleted, which matches that theory aswell). — ASDFGerte, Jul 18 '18 at 16:17
@ASDFGerte Yes, you're right about mutate - I don't deeply know js (@Luca ), and thats why try to use includes, because read aboun it in documentation. But about filter - I think, but dont't know how I can use it! — Inky Rein, Jul 18 '18 at 16:28

score 2 · Answer 1 · answered Jul 18 '18 at 16:21

With the forEach method you take on the array one item at a time. When you are on item with id 5 you find it and delete it, so the item with id 6 takes it's place. Then the item with id 7 takes the item with id 6 place and so this is the next one checked and the other one is skipped. It is not considered a good idea to mutate the array you are looping through. Using the array.filter method makes more sense:

var data = [
    {id: 1, type: "exempt_dealer"},
    {id: 2, type: "licensed_dealer"},
    {id: 3, type: "partnership"},
    {id: 4, type: "company"},
    {id: 5, type: "licensed_dealer_accountant"},
    {id: 6, type: "company_accountant"},
    {id: 7, type: "partnership_accountant"}
];

var exclude_types = [
    'company_accountant',
    'licensed_dealer_accountant',
    'partnership_accountant'
];

var result = data.filter(item => !exclude_types.includes(item.type));

console.log(result);

thanks Giannis for deeply explanation of my problem! Writing a solution is good, but here's why it's happening this is even better! — Inky Rein, Jul 18 '18 at 16:35

score 1 · Accepted Answer · answered Jul 18 '18 at 16:18

1

splice mutates the array during iteration. You should use Array.filter

var data = [{id: 1, type: "exempt_dealer"},{id: 2, type: "licensed_dealer"},{id: 3, type: "partnership"},{id: 4, type: "company"},{id: 5, type: "licensed_dealer_accountant"},{id: 6, type: "company_accountant"},{id: 7, type: "partnership_accountant"}];
var exclude_types =['company_accountant','licensed_dealer_accountant','partnership_accountant'];

data = data.filter(({type}) => !exclude_types.includes(type));
console.log(data);

answered Jul 18 '18 at 16:18

Nikhil Aggarwal

28,197
4
43
59

Thanks you, Nikhil! You was be first! And you give me the way to filter! – Inky Rein Jul 18 '18 at 16:31
@InkyRein - Glad to help you :) – Nikhil Aggarwal Jul 18 '18 at 16:32

score 0 · Answer 3 · answered Jul 18 '18 at 16:28

In my opinion, the easiest way to do achieve your desired result is to use the Array.prototype.filter method. In the callback function just check if the current element's type property is found in the exclude_types array:

var data = [{
    id: 1,
    type: "exempt_dealer"
  },
  {
    id: 2,
    type: "licensed_dealer"
  },
  {
    id: 3,
    type: "partnership"
  },
  {
    id: 4,
    type: "company"
  },
  {
    id: 5,
    type: "licensed_dealer_accountant"
  },
  {
    id: 6,
    type: "company_accountant"
  },
  {
    id: 7,
    type: "partnership_accountant"
  }
];

var exclude_types = [
  'company_accountant',
  'licensed_dealer_accountant',
  'partnership_accountant'
];

var filtered = data.filter(function(el) {
  return exclude_types.indexOf(el.type) === -1;
});

console.log(filtered);

Unexpected result with work on js array

3 Answers3