Home > Blockchain >  How to filter an array with the help of another array on JS view using vuex?
How to filter an array with the help of another array on JS view using vuex?

Time:08-07

Using VueX, I try to filter my "ListJobs" array based on currentTag. Basically I'm trying to say that if currentTag contains any of the elements that match the rows role, level, languages and tool then it returns the elements that match.

   state: [
      listJobs: [
      {
        "id": 1,
        "company": "Photosnap",
        "role": "Frontend",
        "level": "Senior",
        "languages": ["HTML", "CSS", "JavaScript"],
      },
      {
        "id": 2,
        "company": "Manage",
        "role": "Frontend",
        "level": "Senior",
        "languages": ["HTML", "CSS", "JavaScript"],
      },
      {
        "id": 3,
        "company": "Account",
        "role": "Frontend",
        "level": "Senior",
        "languages": ["HTML", "CSS", "JavaScript"],
      },
    ],
    currentTag: [],

I tried something like this. It works but only for the Role line. I wish it would work for all my lines

  getters: {
    getJobs(state) {
      if (state.currentTag.length > 0) {
        return state.listJobs.filter(job => job['role'].includes(state.currentTag))

      } else {
        return state.listJobs
      }
    }
  },

CodePudding user response:

Its actually easier with .some

  getters: {
    getJobs(state) {
        return state.listJobs.filter(job => state.currentTag.some(job.role))
    }
  },

CodePudding user response:

I forgot to change the other data in the array. It's more correct this way

   state: [
      listJobs: [
      {
        "id": 1,
        "company": "Photosnap",
        "role": "Frontend",
        "level": "Senior",
        "languages": ["HTML", "CSS", "JavaScript"],
      },
      {
        "id": 2,
        "company": "Manage",
        "role": "Fullstack",
        "level": "Midweight",
        "languages": ["Python"],
      },
      {
        "id": 3,
        "company": "Account",
        "role": "Frontend",
        "level": "Junior",
        "languages": ["JavaScript"],
      },
    ],
    currentTag: [],
  • Related