reactjs 如何通过匹配来自动态数组的相似id,从这个现有数组创建一个新数组

gojuced7  于 2023-03-22  发布在  React
关注(0)|答案(2)|浏览(147)

我需要通过过滤数据来创建一个新数组。

{
  "roles": [
    {
      "role": "manager",
      "test_id": "123"
    },
    {
      "role": "cashier",
      "test_id": "123"
    },
    {
      "role": "customer",
      "test_id": "123"
    },
    {
      "role": "cashier_2",
      "test_id": "500"
    }
  ],
}

我需要过滤这个数组,并使用test_id创建一个新数组,这是预期的格式。

{
  "roles": [
    {
      "role": [manager, cashier, customer],
      "test_id": "123"
    },
    {
      "role": "cashier_2",
      "test_id": "500"
    }
  ],
}

我尝试使用filter方法和map方法,但无法获得预期的输出。

let x = [];

   const test = userRoles?.map((item, index, element) => {
     let next = element[index+1];
        if(item?.test_id == next?.test_id){
            x.push(item?.role)   
         }
     })
gstyhher

gstyhher1#

我不认为map()在这里工作,因为它只是将条目Map到(新)条目,但您需要对它们进行分组。这是reduce()的工作,它允许您从条目中创建任何内容。
在这种情况下,在test_id和分组条目之间使用一个对象可以很好地进行查找:

const data = {
  "roles": [
    {
      "role": "manager",
      "test_id": "123"
    },
    {
      "role": "cashier",
      "test_id": "123"
    },
    {
      "role": "customer",
      "test_id": "123"
    },
    {
      "role": "cashier_2",
      "test_id": "500"
    }
  ],
}

const res = Object.values(data.roles.reduce((groups, entry) => {
    groups[entry.test_id] ??= {test_id: entry.test_id, role: []}
    groups[entry.test_id].role.push(entry.role)
    return groups
  },{})
)

console.log(res)
dwthyt8l

dwthyt8l2#

要从现有数组创建所需的新数组,可以使用reduce()方法迭代角色并按其test_id分组。对于每个角色,可以检查累加器数组中是否已经存在具有相同test_id的对象。如果存在,则可以将角色推送到现有对象的role数组。如果不存在,则可以将角色推送到role数组。你可以用test_id创建一个新的对象,并把它推到accumulator数组中,下面的代码可以做到这一点:

const roles = [
  {
    "role": "manager",
    "test_id": "123"
  },
  {
    "role": "cashier",
    "test_id": "123"
  },
  {
    "role": "customer",
    "test_id": "123"
  },
  {
    "role": "cashier_2",
    "test_id": "500"
  }
];

const groupedRoles = roles.reduce((accumulator, role) => {
  const existingGroup = accumulator.find(group => group.test_id === role.test_id);
  
  if (existingGroup) {
    existingGroup.role.push(role.role);
  } else {
    accumulator.push({
      test_id: role.test_id,
      role: [role.role]
    });
  }
  
  return accumulator;
}, []);

console.log(groupedRoles);

这应输出:

[  {    "test_id": "123",    "role": ["manager", "cashier", "customer"]
  },
  {
    "test_id": "500",
    "role": ["cashier_2"]
  }
]

请注意,代码假设roles数组已经按test_id排序。如果不是这样,您可以首先使用sort()方法对其进行排序。此外,我已经使用console.log()显示结果,但您可以从函数返回groupedRoles数组或根据需要以其他方式使用它。

相关问题