按对象键对数组进行分组,其中键是一个对象

问题描述 投票:0回答:1

我想按 rg_ext objectKey 对这个数组进行分组,其中 rg_ext 中的每个键都与其他对象中的 rg_ext 相等匹配。

像这样..

const RoomsPrices = ref([
  {
    rg_ext: {
      class: 5,
      quality: 0,
      sex: 0,
      bathroom: 2,
      bedding: 3,
      family: 0,
      capacity: 2,
      club: 0,
    },
    room_name: "2 Bedrooms Double Suite (full double bed)",
    cost: 10000,
    priceid: 15464,
  },
  {
    rg_ext: {
      class: 3,
      quality: 0,
      sex: 0,
      bathroom: 2,
      bedding: 2,
      family: 0,
      capacity: 3,
      club: 0,
    },
    room_name: "3 Bedrooms Double Suite (full double bed)",
    cost: 14000,
    priceid: 12464,
  },
  {
    rg_ext: {
      class: 3,
      quality: 0,
      sex: 0,
      bathroom: 2,
      bedding: 2,
      family: 0,
      capacity: 3,
      club: 0,
    },
    room_name: "3 Bedrooms Double Suite (full double bed)",
    cost: 14000,
    priceid: 12464,
  },
  {
    rg_ext: {
      class: 5,
      quality: 0,
      sex: 0,
      bathroom: 2,
      bedding: 3,
      family: 0,
      capacity: 2,
      club: 0,
    },
    room_name: "2 Bedrooms Double Suite (full double bed)",
    cost: 16300,
    priceid: 36464,
  },
]);

我正在尝试在 NuxtJs 中使用 Lodash 来实现这一点。

const RoomGroup = computed(() => {
  const GP = useGroupBy(RoomsPrices.value, "rg_ext");
  return GP;
});

如何在此处匹配 rg_ext 中的每个键值,然后返回一个分组数组。 因为在这里,我得到了所有 4 个对象而不是 2 个具有精确 rg_ext 的对象。

javascript nuxt.js vuejs3 lodash
1个回答
0
投票

不确定 lodash 是否可以帮助你,我会手动完成。分组一如既往地工作,即对于每个项目,遍历已创建的组,然后将其添加到现有组或开始一个新组。您只需要检查完整的对象而不是单个字段:

const roomPrices = [
  {
    rg_ext: {
      class: 5,
      quality: 0,
      sex: 0,
      bathroom: 2,
      bedding: 3,
      family: 0,
      capacity: 2,
      club: 0,
    },
    room_name: "2 Bedrooms Double Suite (full double bed)",
    cost: 10000,
    priceid: 15464,
  },
  {
    rg_ext: {
      class: 3,
      quality: 0,
      sex: 0,
      bathroom: 2,
      bedding: 2,
      family: 0,
      capacity: 3,
      club: 0,
    },
    room_name: "3 Bedrooms Double Suite (full double bed)",
    cost: 14000,
    priceid: 12464,
  },
  {
    rg_ext: {
      class: 3,
      quality: 0,
      sex: 0,
      bathroom: 2,
      bedding: 2,
      family: 0,
      capacity: 3,
      club: 0,
    },
    room_name: "3 Bedrooms Double Suite (full double bed)",
    cost: 14000,
    priceid: 12464,
  },
  {
    rg_ext: {
      class: 5,
      quality: 0,
      sex: 0,
      bathroom: 2,
      bedding: 3,
      family: 0,
      capacity: 2,
      club: 0,
    },
    room_name: "2 Bedrooms Double Suite (full double bed)",
    cost: 16300,
    priceid: 36464,
  },
]

const groupByObj = (arr, prop) => {
  const objectsMatch = (o1,o2) => {
    const k1 = Object.keys(o1)
    return k1.length === Object.keys(o2).length && k1.every(k => o1[k] === o2[k])
  }
  const res = []
  for(const item of arr){
    let group = res.find(g => objectsMatch(g[prop], item[prop]))
    if(!group){
      group = {[prop]: item[prop], items: []}
      res.push(group)
    }
    const {[prop]:_ , ...data} = item // just for readability of the example
    group.items.push(data)
  }
  return res
}

console.log(groupByObj(roomPrices, 'rg_ext'))

在Vue中,需要先解压

ref
,其他都是一样的

© www.soinside.com 2019 - 2024. All rights reserved.