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);

What do you want to do when some of the `images` array results on an empty array, for example, when `let imagesToDelete = ["test1", "test2"];`. What is going to be the output for that case? — Shidersz, Jul 18 '19 at 18:24
Hi @Shidersz In that case, the images array will be an empty array — Issaki, Jul 18 '19 at 18:26
Possible duplicate of [How to filter object array based on attributes?](https://stackoverflow.com/questions/2722159/how-to-filter-object-array-based-on-attributes) — thmsdnnr, Jul 18 '19 at 18:31

score 1 · Accepted Answer · answered Jul 18 '19 at 18:26

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)

answered Jul 18 '19 at 18:26

Medet Tleukabiluly

11,662
3
34
69

Hi @Medet Thanks for the reply! I can only accept your answer in 4 mins time. Meanwhile, is it possible if you can add some comments so that I can understand better? – Issaki Jul 18 '19 at 18:28
You can make this shorter: newOptionList = optionList.map(option => ({ images: option.images.filter(image => !imagesToDelete.includes(image.url)) })) – Vinayak Bagaria Jul 18 '19 at 18:29
@VinayakBagaria we could, if we agreed on using es6, otherwise nope – Medet Tleukabiluly Jul 18 '19 at 18:46

score 1 · Answer 2 · answered Jul 18 '19 at 18:28

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);

charlietfl · Answer 3 · 2019-07-18T18:25:20.030

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>

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

3 Answers3