Remove each element of array from subarrays of objects?

Question

I have an array of objects with this structure

const arr = [{
  id: 0,
  name: 'string'
}, {
  id: 1,
  name: 'string'
}]

I also have main array

const mainArray = [{
    items: [{
      id: 0,
      name: 'string'
    }]
  },
  {
    items: [{
        id: 5,
        name: 'string'
      },
      {
        id: 3,
        name: 'string'
      }
    ]
  }
];

I'm displaying every item in items arrays from mainArray on the screen. What I want to do is remove every item of arr from every items array of mainArray and show updated mainArray on the screen.

I was thinking doing something like this

mainArray = mainArray.map((e) => {
      e.items = e.items.filter((el) => {
        return !arr.includes( el );
      });
  });

This returns an error Cannot read property 'items' of undefined

Or something like this

mainArray = mainArray.filter((e) => {
        return !arr.includes( e.items );
  });

But this also doesn't work.

All the help will be appreciated.

can you add an example of your desired output? Also side node: Your map function doesn't return anything so you would end up with an empty mainArray — noa-dev
– noa-dev, Commented Nov 20, 2018 at 13:50
You cannot do mainArray = ... since you used the const keyword to define that variable. it is a constant and cannot be overridden. — vsync
– vsync, Commented Nov 20, 2018 at 13:51

vsync · Accepted Answer · 2018-11-20 14:06:37Z

1

As I've said in the comments, you cannot use const keyword and override the variable later. but, you don't event need to, since you can modify the inner properties without a problem:

const arr = [
  { id:0, name:'string' }, 
  { id:1, name:'string' }
]

const mainArray = [{
    items: [{ id:0, name:'string' },]
  },
  {
    items: [
      { id:5, name:'string' },
      { id:3, name:'string' },
      { id:1, name:'string' },
    ]
  }
];


// for each "items" item, check if its "id" exists in the "arr" Array, so 
// I like to use "some" Array method for that:
mainArray.map((e) => {
    e.items = e.items.filter(el => !arr.some(needle => needle.id == el.id))
}); 

console.log( mainArray )

edited Nov 20, 2018 at 14:06

answered Nov 20, 2018 at 14:01

vsync

133k61 gold badges345 silver badges430 bronze badges

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

Comments

epascarello · Accepted Answer · 2018-11-20 13:55:29Z

I would map the used ids into an array for easier look up. That it is a foreach loop over the main array items, and than filter using includes to see if the item is in the array.

const arr = [{
  id: 0,
  name: 'string'
}, {
  id: 1,
  name: 'string'
}]

const mainArray = [{
    items: [{
      id: 0,
      name: 'string'
    }]
  },
  {
    items: [{
        id: 5,
        name: 'string'
      },
      {
        id: 3,
        name: 'string'
      }
    ]
  }
];

// map ids into a look up array so we do not 
// have to loop over objects every time
const usedIds = arr.map(o => o.id);

// Loop over main array so we can access each object
mainArray.forEach(sa => {
  // replace items with a filtered array
  // filter checks to see if the id is not used
  sa.items = sa.items.filter(o => !usedIds.includes(o.id))
})

console.log(mainArray)

Collectives™ on Stack Overflow

Remove each element of array from subarrays of objects?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related