Remove specific element in nested array in JavaScript

Question

I have the following structure. And I am trying to remove specific element in small_category which is in deleteTargetCodeArr

const parentArr = [
  {
    middle_code: "EX42",
        middle_name: "Checkup A",
        small_category:[{name: 'HAV Ab IgG', code: 'CH187'},{name: 'HAV Ab IgM', code: 'CH188'}] 
},
  {
    middle_code: "EX42",
        middle_name: "Checkup B",
        small_categor:[{name: 'HAV Ab IgG', code: 'CH194'},{name: 'HAV Ab IgM', code: 'CH200'}, {name: 'HAV Ab IgM', code: 'CH201'}] 
},
  
  ]
  
const deleteTargetCodeArr =['CH187', 'CH200'] 

So result should be looks like below

[
  {
    middle_code: "EX42",
        middle_name: "Checkup A",
        small_category:[{name: 'HAV Ab IgM', code: 'CH188'}] 
},
  {
    middle_code: "EX42",
        middle_name: "Checkup B",
        small_categor:[{name: 'HAV Ab IgG', code: 'CH194'}, {name: 'HAV Ab IgM', code: 'CH201'}] 
},

  ]

And I found wonderful solutions in this link (JS: Remove object from nested array and return parent array)

I tried this below and perfectly works well for me.

const resultArr = parentArr

resultArr.forEach((item)=> item. small_category.forEach((small, index1)=>{
  if(deleteTargetCodeArr.includes(small.code)){
    return item. small_category.splice(index1,1)
  }
}))

I am wondering is there any efficient way to fix this. Because I checked few article they say it is better to use map, filter or something like these method for efficiency. and it is dangerous using forEach cause this change original data. Also I am not sure is this right use duplicated iterator statements..

What can I try next?

Answer 1

I'm guessing you're learning JS, so the best advice I can give you is to write readable code, rather than looking for nasty tricks. Therefore, readability and maintanability >> efficiency. This doesn't mean that you shouldn't care about efficiency, but that most of the times elegant readable solutions are efficient.

Furthermore, trying to optimize code as much as you can will make you lose a lot of time (while learning) and, probably, you won't get much out of it.

This being said, I really like the implementation with map and filter, since it's more readable, clearer and doesn't alter the original array, which is very nice in many contexts.

const yourOutput = parentArr.map((el) => {
  // This builds a new array, *mapping* every element of the old array into something new

  // This builds a filtered array, throwing away only what you don't like
  const filteredCategories = el.small_category.filter(
    (category) => !deleteTargetCodeArr.includes(category.code)
  );

  // Here we return, for each element of the old array, the shape of each element in the new array!
  return {
      middle_code: el.middle_code,
      middle_name: el.middle_name,
      small_category: filteredCategories
  }
});

console.log(yourOutput);

Here I am using map since we want to obtain an altered version of the array, and filter to actually filter out the inner arrays.

Consider upvoting / accepting my answer if you've found it useful! Thanks!