javascript - 返回数组中带有父元素的单个子元素

标签 javascript arrays vuejs2

这就是我想做的事情:

我想遍历用户职位,然后使用它们循环遍历分配有职位的办公室,并仅返回办公室和用户所在的职位。

这是我尝试过的,我知道它是多余的,只是遍历所有办公室并按用户职位对其进行过滤,并返回与 userPositions 相同的精确结果,我只是不能弄清楚如何遍历它们并获取办公室内的职位,并仅返回其 id == 用户 posts.id 的办公室和 office.positions

    filter(){
      var userPositions = this.users.positions;
      var offices = this.offices;
      var filter = []
      var position = offices.forEach(office => {
        office.positions.forEach(position => {
          filter.push(position)
        })
      });
      userPositions.forEach(userP => {
        filter.find(p => p.id === userP.id)
      })
      console.log(filter)
    }

这是我想要的样子:

[
    {
        "id": 1,
        "name": "Leadership Committee",
        "abbreviation": "LC",
        "positions": [
            {
                "id": 122,
                "name": "Deputy Director",
                "abbreviation": "DD",
            },
        ]
    },
    {
        "id": 10,
        "name": "Admin Committee",
        "abbreviation": "AC",
        "positions": [
            {
                "id": 124,
                "name": "Director",
                "abbreviation": "Dir",
            }
        ]
    }
]

这是 user.positions 信息:

{
    "id": 1,
    "username": "Admin",
    "status": 1,
    "created_at": "2019-07-23 21:49:56",
    "updated_at": "2019-08-30 07:22:17",
    "positions": [
        {
            "id": 124,
            "name": "Director",
            "abbreviation": "Dir",
        },
        {
            "id": 122,
            "name": "Deputy Director",
            "abbreviation": "DD",
        }
    ]
}

这是占领所有办公室的样子:

[
    {
        "id": 1,
        "name": "Leadership Comittee",
        "abbreviation": "LC",
        "positions": [
            {
                "id": 119,
                "name": "Director",
                "abbreviation": "Dir",
                "pivot": {
                    "office": 1,
                    "position": 119,
                    "hierarchy": 1
                }
            },
            {
                "id": 122,
                "name": "Deputy Director",
                "abbreviation": "DD",
                "pivot": {
                    "office": 1,
                    "position": 122,
                    "hierarchy": 2
                }
            },
        ]
    },
    {
        "id": 10,
        "name": "Admin Comittee",
        "abbreviation": "AC",
        "positions": [
            {
                "id": 124,
                "name": "Director",
                "abbreviation": "Dir",
                "pivot": {
                    "office": 10,
                    "position": 124,
                    "hierarchy": 0
                }
            }
        ]
    }
]

最佳答案

简化了问题陈述。

Given 2 source arrays, say source1 and source2 , return all source2 array elements that relates to a specific field in source1.

Relation: field in source1 should match one element of a nested array field in source2

Constraint: elements in source2 array should be modified before returning as per the relation above

级别 1: 循环遍历所有 source1 元素(在您的情况下为 user.positions )。这里我用了Array.prototype.reduce首先,因为我的最终返回数组的大小可能小于 source1数组,如果我在 source2 中找不到相关元素。就您而言,在任何办公室都找不到职位。

2 级: Array.prototype.reduce 内部函数,对于 source1 的每个元素(您的情况下的每个用户位置)返回 source2 中的匹配元素大批。在本例中我使用 Array.prototype.map函数,因为约束表示 source2 中的元素应修改数组。

第 3 级: Array.prototype.map 内部函数,修改source2的每个元素(本例中为每个办公室)。我在 map 函数中应用关系,以修改 source2 中的每个元素。 (每个办事处)。在您的例子中,我正在修改每个办公室的职位属性,应用 Array.prototype.filter具有用户职位对象的办公室职位数组上的函数。

过滤器可能会给出一个空数组或办公室职位数组的子数组,用于替换原始办公室职位数组本身。每个过滤对象还可以使用映射函数进行修改,以删除一些不需要的字段。在你的例子中,我从每个办公室位置对象中删除了枢轴。

第 4 级:删除所有修改的 source2 Positions 属性为空数组的对象。

把它们放在一起......

var data = {
  users: {
    id: 1,
    username: "Admin",
    status: 1,
    created_at: "2019-07-23 21:49:56",
    updated_at: "2019-08-30 07:22:17",
    positions: [
      {
        id: 124,
        name: "Director",
        abbreviation: "Dir"
      },
      {
        id: 122,
        name: "Deputy Director",
        abbreviation: "DD"
      }
    ]
  },
  offices: [
    {
      id: 1,
      name: "Leadership Comittee",
      abbreviation: "LC",
      positions: [
        {
          id: 119,
          name: "Director",
          abbreviation: "Dir",
          pivot: {
            office: 1,
            position: 119,
            hierarchy: 1
          }
        },
        {
          id: 122,
          name: "Deputy Director",
          abbreviation: "DD",
          pivot: {
            office: 1,
            position: 122,
            hierarchy: 2
          }
        }
      ]
    },
    {
      id: 10,
      name: "Admin Comittee",
      abbreviation: "AC",
      positions: [
        {
          id: 124,
          name: "Director",
          abbreviation: "Dir",
          pivot: {
            office: 10,
            position: 124,
            hierarchy: 0
          }
        }
      ]
    }
  ],
  filter() {
    return this.users.positions.reduce((acc, userPosition) => {
        acc = [
          ...acc,
          ...this.offices
            .map(office => {
              return {
                ...office,
                positions: office.positions
                  .filter(
                    officePosition => officePosition.id === userPosition.id
                  )
                  .map(({ pivot, ...rest }) => rest)
              };
            })
            .filter(office => office.positions.length > 0)
        ];
      return acc;
    }, []);
  }
};

console.log(data.filter());

关于javascript - 返回数组中带有父元素的单个子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58194409/

相关文章:

javascript - 将某些数组元素移到数组前面

javascript - 静态 HTML 或生成动态 HTML |表现

javascript - 导入不带转义引号的 csv javascript

arrays - 快速排序 NSDates 数组

javascript - 取一个输入的一维数组[1,2,3,4],输出除当前索引[24,12,8,6]之外的整数的乘积;

javascript - 如何将 vanilla .js 添加到自定义 Vue 组件

javascript - 等待模态窗口关闭,然后在 javascript 中执行以下行

javascript - 从没有重复的 Javascript 数组创建 HTML 下拉列表

javascript - Vue SPA 在使用 vue-router 导航时强制重新加载页面

javascript - Vue js在表格中插入链接