Question

反应应用程序我从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？

Answer 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);

反应名称重复但字段不同

1 个答案: