Checking if values from an array equals values from another VueJS

Question

I have two Arrays in a VueJS instance. The arrays display courses a student can attend at school. First are the courses the user attend, and second are all the courses with students in them.

The arrays looks like this:

let mainVue = new Vue({
    el: '#mainContent',
    data: {
      myCourses: [{Course: "A"}, {Course: "B"}],
      allCourses: [{Course: "A"}, {Course: "B"}, {Course: "C"}, {Course: "A"}]
}

Both arrays consist of data populated from user inputs, so they changes over time. The first array are user specific content (Courses the user attends) and the second array are an array of all courses which have someone attend to.

I want to check the amount of people who attend the same course as the user. So in this case I want to check how many from array myCourses (Course a and b) are in array allCourses.

In other words, I want to check how many occurrences from array "myCourse" are in the array "allCourses".

Evgeny Melnikov · Accepted Answer · 2020-11-25 10:56:27Z

1

May be a computed prop would suite you (check id/course names intersection)

const mainVue = new Vue({
    el: '#mainContent',
    
    data: {
      myCourses: [{Course: "A"}, {Course: "B"}],
      allCourses: [{Course: "A"}, {Course: "B"}, {Course: "C"}, {Course: "A"}],
   },
   
   computed: {
      allCoursesCounts() {
        return this.allCourses.reduce((acc, { Course }) => {
          acc[Course] = (acc[Course] || 0) + 1
          return acc
        }, {})
      },
      subscribedTo() {
        const allCoursesCounts = this.allCoursesCounts

        return this.myCourses.map(({ Course }) => ({
          courseName: Course,
          amountOfUsers: allCoursesCounts[Course] || 0,
        }))
      }
   }
});

<div id="mainContent">
    <div v-for="({ courseName, amountOfUsers }) of subscribedTo" :key='courseName'>
      <span>Course {{ courseName }} - {{ amountOfUsers }}</span>
    </div>
</div>

edited Nov 25, 2020 at 10:56

answered Nov 25, 2020 at 9:51

Evgeny Melnikov

1,0921 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kevin Izuchukwu Over a year ago

I don't think you can use an includes here because it measures on shallow equality

Evgeny Melnikov Over a year ago

@KevinIzuchukwu that's why I suggested to compare something like array item IDs. It could be changed to a function that performs deep comparison, I usually use lodash

egx Over a year ago

This kinda works. But the result is 4 and I want to filter the result to be like "Course A: 2" Course B: 2". So you can see the total attendences on each course and not the total amount of all courses.

Evgeny Melnikov Over a year ago

@egx I changed the code according to your requirement. (Didn't get what you need at first, sorry :) )

egx Over a year ago

Thank you man! This look perfect. I've marked your answer as solved :-)

|

Kevin Izuchukwu · Accepted Answer · 2020-11-25 09:52:02Z

0

You want to filter all courses that have an occurrence in myCourses

allCourses.filter(course => {
   return myCourses.find(m => {
      return m.Course === course.Course
   })
}).length

answered Nov 25, 2020 at 9:52

Kevin Izuchukwu

4893 silver badges8 bronze badges

Collectives™ on Stack Overflow

Checking if values from an array equals values from another VueJS

2 Answers 2

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Linked

Related