通过另一个数组Vue js过滤对象中的数组

Question

I have feed with json which has one array with object and object with objects: I am try to filter an object which is in array by another array like:

persons = [
    {
        id: 1,
        name: "Karl"
    },
    {
        id: 2,
        name: "Irma"
    },
    {
        id: 3,
        name: "David"
    }
]

roles = {
    0: {
        id:  1,
        title: "admin",    
        persons: [1,2],
        status: 
    },
    1: {
        id:  2,
        title: "editor",    
        persons: [1]
    },
    2: {
        id:  3,
        title: "moderator",    
        persons: [3]
    }
}

I try to get roles by person like this, but it doesn't work

roles() {
    return this.roles.filter((el) => { 
        return this.persons.map((id) => { return id }).includes(el) 
    })
},

get in Vue

<div v-for="(person) in persons">
    <div>
        {{person.name}}
    </div>
    <div v-for="(role) in roles">
        {{role.title}}
    </div>
</div>

I would like to get a result:

Result: 

    Karl
       - admin
       - editor
    Irma
       - admin
    David
       - moderator

Answer 1

You can't use .filter on objects so you have to get the value using Object.values from this.roles .

You are filtering the roles which is incorrect instead, you have to map on the roles and filter the persons if that particulat person.id is present in role.persons

DEMO

getRoles() {
  return Object.values(this.roles).map(({ id, title, persons }) => {
    return {
      id,
      title,
      persons: [...this.persons].filter((p) => persons.includes(p.id)),
    };
  });
},

Answer 2

As always, there will be multiple ways to solve.

Consider using array.reduce to iterate over the value of each role before checking if that role 's persons array contains the personId you are searching for.

 const persons = [{id:1,name:"Karl"},{id:2,name:"Irma"},{id:3,name:"David"}] const roles = {0:{id:1,title:"admin",persons:[1,2],},1:{id:2,title:"editor",persons:[1]},2:{id:3,title:"moderator",persons:[3]}} const getRolesByPersonId = ( personId ) => { return Object.values(roles).reduce((accumulator, currentValue) => { if (currentValue.persons?.includes(personId)) { return [...accumulator, currentValue] } return accumulator }, []) } console.log(getRolesByPersonId(1)) // admin, editor

I'm not so familiar with Vue, but it might be implemented something like this

<template>
  <div class="hello">
    <h1>Result</h1>
    <ul>
      <li v-for="person in persons" :key="person.id">
        <h2>{{ person.name }}</h2>
        <ul>
          <li v-for="role in getRolesByPersonId(person.id)" :key="role.id">
            {{ role.title }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      persons: [
        { id: 1, name: "Karl" },
        { id: 2, name: "Irma" },
        { id: 3, name: "David" },
      ],
      roles: {
        0: { id: 1, title: "admin", persons: [1, 2] },
        1: { id: 2, title: "editor", persons: [1] },
        2: { id: 3, title: "moderator", persons: [3] },
      },
    };
  },
  methods: {
    getRolesByPersonId(personId) {
      return Object.values(this.roles).reduce((accumulator, currentValue) => {
        if (currentValue.persons?.includes(personId)) {
          return [...accumulator, currentValue];
        }
        return accumulator;
      }, []);
    },
  },
};
</script>