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

【问题标题】：Filter an array in object by another array Vue js通过另一个数组Vue js过滤对象中的数组
【发布时间】：2021-10-04 18:54:37
【问题描述】：

我有一个带有对象的数组和一个带有对象的对象的 json 提要：我试图用另一个数组过滤数组中的一个对象，例如：

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]
    }
}

我尝试像这样按人获得角色，但它不起作用

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

进入 Vue

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

我想得到一个结果：

Result: 

    Karl
       - admin
       - editor
    Irma
       - admin
    David
       - moderator

【问题讨论】：

错误：status: 没有价值。

标签： javascript arrays json vue.js object

【解决方案1】：

您不能在objects 上使用.filter，因此您必须使用Object.values 从this.roles 获取值。

您正在过滤不正确的角色，您必须映射到 roles 并过滤 persons 如果该特定 person.id 存在于 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)),
    };
  });
},

【讨论】：

谢谢！我在我的例子中犯了错误。我修复了它（逐个角色，但不是逐个角色）在这种情况下我可以使用您的代码吗？我正在尝试将其更改为按角色过滤的人

【解决方案2】：

一如既往，会有多种解决方法。

在检查role 的persons 数组是否包含您正在搜索的personId 之前，请考虑使用array.reduce 迭代每个role 的值。

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

我对 Vue 不太熟悉，但它可能会像这样实现

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

【讨论】：