时间戳

首页 > 解决方案 > 返回数组中带有父元素的奇异子元素

javascript - 返回数组中带有父元素的奇异子元素

问题描述

这是我想要做的事情：

我想遍历用户的职位，然后使用这些职位遍历分配给他们职位的办公室，并仅返回办公室和用户所在的职位。

这是我尝试过的，我知道它是多余的，只是遍历所有办公室并按用户位置过滤它并返回与我相同的确切结果userPositions，我只是不知道如何通过它们并抓住位置在办公室内并仅返回具有其 id == 用户 position.id 的 office 和 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
                }
            }
        ]
    }
]

标签： javascriptarraysvuejs2

解决方案

问题陈述简化。

给定 2 个源数组，例如 source1 和 source2 ，返回与 source1 中的特定字段相关的所有 source2 数组元素。

关系：source1 中的字段应匹配 source2 中嵌套数组字段的一个元素

约束： source2 数组中的元素应在返回之前根据上述关系进行修改

级别 1： 遍历所有 source1 元素（user.positions在您的情况下）。我以前从这里Array.prototype.reduce开始，因为source1如果我在 source2. 就您而言，在任何办公室都找不到职位。

第 2 级：在Array.prototype.reduce函数内部，对于（在您的情况下为每个用户位置）的每个元素，返回数组source1中的匹配元素。source2在这种情况下，我使用 Array.prototype.map了函数，因为约束表明source2应该修改数组中的元素。

Level 3：在函数内部，修改（在本例中为每个办公室）Array.prototype.map的每个元素。source2我在 map 函数中应用关系，以修改source2（每个办公室）中的每个元素。在您的情况下，我正在修改每个办公室的位置属性，将Array.prototype.filter函数应用于带有用户位置对象的办公室位置数组。

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

级别 4：删除所有source2位置属性为空数组的修改对象。

把它们放在一起...

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());

推荐阅读