如何使用数组包含并根据对象的属性检查对象

Question

我有一个数组classTopics ，其中的对象看起来像这样：

{
  questions:2,
  id:49,
  topic:{
    edited: null
    id: 1
    name: "Topic name"
    status: "ACTIVE"
    topicCode:"02"
  }
}

我还有一个数组allTopics ，其中的对象与上面的示例中的topic属性相同：

 {
    edited: null
    id: 1
    name: "Topic name"
    status: "ACTIVE"
    topicCode:"02"
  }

在选择字段中，我想过滤所有与classTopics数组的对象中的property topic相同的property topic 。 因此，如下所示：

 <AutoCompleteSelect
   options={allTopics.filter(topic => !classTopics.includes(topic)).map(({name}) => ({value: name, label: name}))}
 />

但是，这是行不通的，因为它正在整体检查对象。 我该如何做类似的事情来检查对象的属性？

基本上，我想要实现的是一种更好的方法：

const filteredTopics = allTopics
                        .filter(topic => 
                          (classTopics.findIndex(classTopic => classTopic.topic.id === topic.id)) === -1);

您可以在此处找到工作示例。

Answer 1

按整个对象比较（每个属性）

您可以使用some检查，如果话题是classTopics数组中，并利用every与Object.entries检查每个属性的主题阵列中的一样：

 const classTopics = [{ questions: 2, id: 49, topic: { edited: null, id: 1, name: "Topic name", status: "ACTIVE", topicCode: "02" }}] const allTopics = [{ edited: null, id: 1, name: "Topic name", status: "ACTIVE", topicCode: "02" }] const filterTopics = (a, c) => { return a.filter(topic => c .some(c => Object.entries(c.topic) .every(([k,v]) => topic[k] === v) ) ) } console.log(filterTopics(allTopics, classTopics)) 

按ID比较

正如评论中所建议的，检查整个对象是过大的，ID的目的是唯一地标识一个对象-使用ID可以使解决方案更加有效：

 const classTopics = [{ questions: 2, id: 49, topic: { edited: null, id: 1, name: "Topic name", status: "ACTIVE", topicCode: "02" }}] const allTopics = [{ edited: null, id: 1, name: "Topic name", status: "ACTIVE", topicCode: "02" }] const filterTopics = (a, c) => a.filter(topic => c.some(t => t.topic.id === topic.id)) console.log(filterTopics(allTopics, classTopics)) 

Answer 2

为了简单起见，我更喜欢在js文件而不是html中进行过滤。 我也在这里使用lodash js lib来减少代码大小。

 const classTopics = [{ questions: 2, id: 49, topic: { edited: null, id: 1, name: "Topic name", status: "ACTIVE", topicCode: "02" }}] const allTopics = [{ edited: null, id: 1, name: "Topic name", status: "ACTIVE", topicCode: "02" }] const topicsToshow = _.unionWith(allTopics,classTopics,(cT,aT)=> aT.id===cT.topic.id) console.log(topicsToshow) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.14/lodash.min.js"></script> 

Answer 3

您可以仅按主题ID，名称或其他属性进行比较，而不要按整个主题对象进行比较：

allTopics
  .filter(topic => !classTopics.map(t => t.id).includes(topic.id))
  .map(topic => ({value: topic.name, label: topic.name}))