根据另一个数组中的值删除嵌套对象数组中的值答案

【问题标题】：Remove values in nested array of objects based on values from another array根据另一个数组中的值删除嵌套对象数组中的值
【发布时间】：2019-07-18 18:17:59
【问题描述】：

我有一个具有以下结构的对象数组：

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

我还有另一个名为 imagesToDelete 的数组，具有以下值：

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

我的目标是根据 imagesToDelete 数组中的值从 嵌套数组 中删除值。如果操作正确，结果如下：

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

以下是我当前的代码，它没有删除任何值：

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

console.log(optionList);

【问题讨论】：

当images 数组中的某些结果为空数组时，例如let imagesToDelete = ["test1", "test2"]; 时，您想做什么。该案例的输出结果是什么？
嗨@Shidersz 在这种情况下，图像数组将是一个空数组
How to filter object array based on attributes?的可能重复

标签： javascript arrays object filter

【解决方案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)

【讨论】：

嗨@Medet 感谢您的回复！我只能在 4 分钟内接受你的回答。同时，是否可以添加一些cmets以便我更好地理解？
你可以缩短这个：newOptionList = optionList.map(option => ({ images: option.images.filter(image => !imagesToDelete.includes(image.url)) }))
@VinayakBagaria 我们可以，如果我们同意使用 es6，否则不行

【解决方案2】：

有几个问题。大多数情况下，您永远不会在迭代中实际修改图像数组，并根据实际上并未删除任何项目的 optionList 进行过滤（因为如果没有图像，您声明它会保留为空数组）。

需要迭代optionList，并根据列表修改images数组进行删除。

您可以使用forEach 进行外部迭代。

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

【讨论】：

【解决方案3】：

filter() 返回一个新数组并且不会改变原始数组

尝试做

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>

【讨论】：