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-25T10:56:27.940

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 '20 at 10:56

answered Nov 25 '20 at 09:51

Evgeny Melnikov

952
7
13

I don't think you can use an includes here because it measures on shallow equality – Kevin Izuchukwu Nov 25 '20 at 09:53
@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](https://stackoverflow.com/questions/29951293/using-lodash-to-compare-arrays-items-existence-without-order) – Evgeny Melnikov Nov 25 '20 at 09:56
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. – egx Nov 25 '20 at 09:57
@egx I changed the code according to your requirement. (Didn't get what you need at first, sorry :) ) – Evgeny Melnikov Nov 25 '20 at 10:09
Thank you man! This look perfect. I've marked your answer as solved :-) – egx Nov 25 '20 at 10:19
When I display it with {{ subscribedTo }} it display an array of objects. How can I just display this as a string? @EvgenyMelnikov – egx Nov 25 '20 at 10:30
@egx thank you! I've edited my answer to make it better so that it would be easier to print the required output. Now you can control the output format in the HTML template. – Evgeny Melnikov Nov 25 '20 at 10:57

score 0 · Answer 2 · answered Nov 25 '20 at 09:52

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 '20 at 09:52

Kevin Izuchukwu

479
3
8

Checking if values from an array equals values from another VueJS

2 Answers2