返回数组中具有父元素的单个子元素

时间:2019-10-02 02:19:03

标签: javascript arrays vuejs2

这里是我想做的事情:

我想浏览用户的职位,然后使用这些职位在分配了职位的办公室中循环,并只返回用户所在的办公室和职位。

这是我尝试过的方法,我知道它是多余的,它会遍历所有办公室并按用户位置对其进行过滤,并返回与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",
            }
        ]
    }
]

这是用户位置信息:

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

1 个答案:

答案 0 :(得分:1)

简化了问题陈述。

  

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

     

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

     

约束:应先修改source2数组中的元素   按照上述关系返回

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

级别2:Array.prototype.reduce函数中,对于source1的每个元素(在您的情况下,每个用户位置)都返回source2数组中的匹配元素。在这种情况下,我使用了Array.prototype.map函数,因为 constraint 表示应该修改source2数组中的元素。

级别3:Array.prototype.map函数中,修改source2的每个元素(在这种情况下为每个办公室)。我要在map函数中应用该关系,以修改source2(每个办公室)中的每个元素。对于您而言,我正在修改每个办公室的positions属性,将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());