反应重复名称但不同的字段答案

【问题标题】：React Duplicated Name but different fields反应重复名称但不同的字段
【发布时间】：2018-06-23 14:01:20
【问题描述】：

React 应用程序我从 react-select 的 API 部分获取 JSON 数据：

import Select from "react-select";
import fetch from "isomorphic-fetch"; 

return fetch(`some API localhost`)
.then(response => response.json())
.then(json => {
    return { options: json };
 })

现在选项如下所示：

{"Grade": "Math K", "Domain": "Counting & Cardinality"},
{"Grade": "Math K", "Domain": "Geometry"},
{"Grade": "Math 1", "Domain": "Counting & Cardinality"},
{"Grade": "Math 1", "Domain": "Orders of Operation"},
{"Grade": "Math 1", "Domain": "Geometry"},

我想合并重复的成绩并使其类似于：

{"Grade": "Math K", "Domain": ["Counting & Cardinality", "Geometry"]},
{"Grade": "Math 1", "Domain": ["Counting & Cardinality" , "Geometry" , "Orders of Operation" ]}

我将如何使用 react 来做到这一点？

【问题讨论】：

你告诉我。我们不是来为您编写代码的。尝试一下，让我们知道您在哪里挣扎并展示您的工作。

标签： json reactjs fetch-api react-select

【解决方案1】：

这不是一个超级复杂的问题。您需要考虑如何使给定的输入数组值可迭代。

一旦您有了一种迭代方式，就可以更轻松地应用您所要求的转换逻辑，例如合并给定成绩的域。

const response = [{
    "Grade": "Math K",
    "Domain": "Counting & Cardinality"
  },
  {
    "Grade": "Math K",
    "Domain": "Geometry"
  },
  {
    "Grade": "Math 1",
    "Domain": "Counting & Cardinality"
  },
  {
    "Grade": "Math 1",
    "Domain": "Orders of Operation"
  },
  {
    "Grade": "Math 1",
    "Domain": "Geometry"
  }
];
const output = {};

response.forEach((item) => {
  const grade = item.Grade;
  // Create a Map / Object to access a particular Grade easily
  output[grade] = output[grade] || {};
  output[grade].Grade = grade;
  output[grade].Domain = output[grade].Domain || [];
  output[grade].Domain.push(item.Domain);
})

const outputObj = Object.keys(output).map((item) => output[item]);

console.log(outputObj);

【讨论】：