How to use array includes and check an object against a property of an object

Question

I have an array classTopics where an object looks like this:

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

And I also have an array allTopics where the objects are the same as topic property in the example above:

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

In the select field I would like to filter all the topics that are the same as a property topic in the objects of the classTopics array. So, something like this:

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

But, that is not working since it is checking the objects as a whole. How can I do something similar where I could check it against the property on the object?

Basically what I am trying to achieve is this in a nicer way:

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

You can find the working example here.

I don't get what you are trying to compare here. Are you just trying to see [if two objects have equal values for each of their keys](https://stackoverflow.com/questions/201183/how-to-determine-equality-for-two-javascript-objects)? — VLAZ, Jul 12 '19 at 10:48
No, I am trying to compare the object in the allTopics array agains an object's property topic in the classTopics array — Leff, Jul 12 '19 at 10:49
this typo here `allTopcis` in `AutoCompleteSelect` might be the problem — Devashish, Jul 12 '19 at 10:53
@ŁukaszNojek but, how to do that when includes compares objects and not just properties? — Leff, Jul 12 '19 at 10:55
@Devashish that was a typo here, but that is not the problem of the question — Leff, Jul 12 '19 at 10:55
@Leff Something like `allTopics.filter(topic => !classTopics.map(t => t.id).includes(topic.id))` — Łukasz Nojek, Jul 12 '19 at 10:56

Kobe · Accepted Answer · 2019-07-12T11:29:36.647

Compare by entire object (each property)

You can use some to check if the topic is inside the classTopics array, and use every with Object.entries to check that each property is the same inside the topics array:

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

Compare by ID

As suggested in the comments, checking the entire object is overkill, the purpose of an ID is to identify an object uniquely - using ID's makes for a much more efficient solution:

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

score 1 · Answer 2 · edited Jul 22 '19 at 20:23

1

I will prefer to do this filtering in js file instead of html for simplicity. Also I am using here lodash js lib to reduce code size.

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>

edited Jul 22 '19 at 20:23

marc_s

732,580
175
1,330
1,459

answered Jul 12 '19 at 11:11

Ninad

423
2
8

Sorry! My Bad!! `const topicsToshowa = _.unionWith(allTopics,classTopics,(aT,cT)=> aT.id===cT.topic.id)` Change last line code to this – Ninad Jul 12 '19 at 11:28
Change your answer then :) – Kobe Jul 12 '19 at 11:30

score 1 · Answer 3 · answered Jul 12 '19 at 11:19

1

You can compare just by topic ID, name or other property instead of whole topic objects:

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

answered Jul 12 '19 at 11:19

Łukasz Nojek

1,511
11
17

How to use array includes and check an object against a property of an object

3 Answers3

Compare by entire object (each property)

Compare by ID