Remove values in nested array of objects based on values from another array

Question

I have an array of objects with the following structure:

let optionList = [
  {
    images: [
      {
        url: "test1"
      },
      {
        url: "test2"
      }
    ]
  },
  {
    images: [
      {
        url: "test3"
      },
      {
        url: "test4"
      }
    ]
  },
  {
    images: [
      {
        url: "test5"
      },
      {
        url: "test6"
      }
    ]
  }
];

I also have another array called imagesToDelete with the following values:

 let imagesToDelete = ["test1", "test3", "test6"];

My goal is to remove values from the nested array based on the values in the imagesToDelete array. If done correctly, this will be the following result:

let optionList = [
  {
    images: [
      {
        url: "test2"
      }
    ]
  },
  {
    images: [
      {
        url: "test4"
      }
    ]
  },
  {
    images: [
      {
        url: "test5"
      }
    ]
  }
];

Below is my current code which did not remove any values:

 optionList.filter(ol => {
  let result = !ol.images.some(
    image => image.url === imagesToDelete.includes(image.url)
  );
  return result;
});

console.log(optionList);

Answer 1

 let optionList = [{ images: [{ url: "test1" }, { url: "test2" } ] }, { images: [{ url: "test3" }, { url: "test4" } ] }, { images: [{ url: "test5" }, { url: "test6" } ] } ]; let imagesToDelete = ["test1", "test3", "test6"]; let newOptionList = optionList.map(function(option) { option.images = option.images.filter(function(item) { return !imagesToDelete.includes(item.url) }) return option }) console.log('newOptionList', newOptionList)

Answer 2

There are a couple of issues. Mostly, you never actually modify the images array in your iterations, and filter based on the optionList which isn't actually removing any items (since if there are no images you state it is left as an empty array).

You need to iterate optionList, and modify the images array based on the list for deletion.

You can use forEach for the outer iteration.

 let optionList = [ { images: [ { url: "test1" }, { url: "test2" } ] }, { images: [ { url: "test3" }, { url: "test4" } ] }, { images: [ { url: "test5" }, { url: "test6" } ] } ]; let imagesToDelete = ["test1", "test3", "test6"]; optionList.forEach(ol => ol.images = ol.images.filter( image => !imagesToDelete.includes(image.url) ) ); console.log(optionList);

Answer 3

filter() returns a new array and does not mutate original

Try doing

 const newList = optionList.filter(ol => { let result = !ol.images.some( image => image.url === imagesToDelete.includes(image.url) ); return result; }); console.log(newList);

 <script> let imagesToDelete = ["test1", "test3", "test6"]; let optionList = [{images: [{url: "test1"},{url: "test2"}]},{images: [{url: "test3"},{url: "test4"}]},{images: [{url: "test5"},{url: "test6"}]}] </script>