javascript - 在 ReactJS 中动态协调 2 个下拉菜单

Question

第一次发帖，我会保持简短。 我有一个从 API 获取的数据，我想，当您选择 A 组时，第二个下拉列表将仅显示 A 组的所有成员。

这些是我有权访问的 API 的示例响应。 注意:一个群组中有很多成员。

列出组

[
  "Group A",
  "Group B",
  "Group C"
]

按组获取成员

[
 {
   "group": "Group A",
   "name": " Jimmy"
 }
]

获取所有成员

[
 {
   "group": "Group A",
   "name": " Jimmy"
 },

 {
   "group": "Group B",
   "name": " Johnny"
 },
 {
   "group": "Group C",
   "name": " James"
 }
]

那么我怎样才能将这些数据整理成类似这样的东西

groups: ["Group A", "Group B", "Group C"]
members: {
          Group A: ["Jimmy"],
          Group B: ["Johnny"],
          Group C: ["James"]
         }

Answer 1

您可以手动在您的群组中添加成员，如下所示

let data = [
 {
   "group": "Group A",
   "name": " Jimmy"
 },

 {
   "group": "Group B",
   "name": " Johnny"
 },
 {
   "group": "Group C",
   "name": " James"
 },
 {
   "group": "Group C",
   "name": " Simon"
 }
]

let groupData = {}
data.forEach(item => {
  if (groupData[item.group]) {
    if (groupData[item.group].indexOf(item.name) === -1) {
      groupData[item.group].push(item.name)
    }
  } else {
    groupData[item.group] = [item.name];
  }
});

console.log("members: ", groupData)
console.log("groups: ", Object.keys(groupData))

// Or you could do the same thing with reduce and es6 conventions
const reducedData = data
  .reduce((acc, item) =>
    (acc[item.group] && acc[item.group].indexOf(item.name) === -1)
  	      ? ({...acc, [item.group]: acc[item.group].concat(item.name)})
  	      : ({...acc, [item.group]: [item.name]}), 
  {});
console.log("members: ", reducedData)
console.log("groups: ", Object.keys(reducedData))