尝试在对象内部映射对象答案

【问题标题】：Trying to map objects inside an object尝试在对象内部映射对象
【发布时间】：2021-09-27 04:56:43
【问题描述】：

我是 webdev 的初学者，但我在使用 reactjs 时遇到了一点问题。我有一系列关于大学的数据，例如：

const data = [
  {
    name: "UFSM",
    total: 17,
    filled: 12,
    approved: 10,
    reproved: 1,
    dropouts: 1,
    requests: 170,
    approved_requests: 120,
    disciplines: [{name: "engineering", value: 10}, {name:"biology", value: 20}, ...]
  }, 
  {...
    disciplines: [{name: "engineering", value: 7}, ....]
  },...]

我正在使用 map 函数将他们所有的名字映射到一个数组中，比如：

let data_name = props.data.map((data) => data.name);

是否可以使用 map 将不同大学的同名学科的值分组到一个数组中？输出如下：

data_engineering = ["10", "7", ...]

这样我就可以将来自不同大学的所有与工程相关的学科放在同一个阵列上。

【问题讨论】：

如果要做分组，可以考虑array.reduce()more
你能在数组中提供更多的对象吗？确认数据的样子:)

标签： javascript reactjs visual-studio-code jsx map-function

【解决方案1】：

const data = [{
  name: "UFSM",
  total: 17,
  filled: 12,
  approved: 10,
  reproved: 1,
  dropouts: 1,
  requests: 170,
  approved_requests: 120,
  disciplines: [{
    name: "engineering",
    value: 10
  }, {
    name: "biology",
    value: 20
  }]
}, {
  name: "ABCD",
  total: 17,
  filled: 12,
  approved: 10,
  reproved: 1,
  dropouts: 1,
  requests: 170,
  approved_requests: 120,
  disciplines: [{
    name: "engineering",
    value: 4
  }, {
    name: "biology",
    value: 5
  }]
}, {
  name: "EFGH",
  total: 17,
  filled: 12,
  approved: 10,
  reproved: 1,
  dropouts: 1,
  requests: 170,
  approved_requests: 120,
  disciplines: [{
    name: "engineering",
    value: 5
  }, {
    name: "biology",
    value: 9
  }]
}]

let result = {};

data.map((data) => data.disciplines).forEach((item, index) => {
  item.forEach((item, index) => {
    if (!result[item.name]) {
      result[item.name] = []
    }
    result[item.name].push(item.value);
  });
});

console.log(JSON.stringify(result));

【讨论】：

【解决方案2】：

如果您想要像engineering 这样的单一学科的数组，您可以执行以下映射：

data_engineering =
  props.data.map((uni) => uni.disciplines.engineering);

对于未定义工程值的大学，此数组将具有 undefined 值。但这可能是您想要的，因为这意味着索引与 data_name 的索引一致。

如果要为所有学科构建这样的数组，可以执行以下操作：

const dataDiscipline = {};
// 1. Collect all disciplines from all universities
// by making them a key of dataDiscipline.
props.data.forEach((uni) =>
  uni.disciplines.forEach((discipline) =>
    dataDiscipline[discipline] = null
  )
);
// 2. Now build the discipline array for each discipline.
Object.keys(dataDiscipline).forEach((discipline) =>
  dataDiscipline[discipline] =
    props.data.map((uni) => uni.disciplines[discipline])
);
// You can now use e.g. dataDiscipline.engineering

【讨论】：