javascript - 使用 map 和 reduce 进行规范化

Question

我想做一个雷达图，但我无法控制 api 输出，所以我必须将复杂的数据转换成某种形式。我被困了至少半个小时。

如何转换这些原始数据

const raw = [{
  "device_info": {
    "device_id": 123,
    "name": "iphone",
  },
  "age_data": [{
    "age_range": "0-10",
    "total_count": 15,
    "man": 6,
    "women": 9
  }, {
    "age_range": "11-20",
    "total_count": 11,
    "man": 7,
    "women": 4
  }]
}, {
  "device_info": {
    "device_id": 456,
    "name": "android",
  },
  "age_data": [{
    "age_range": "0-10",
    "total_count": 1,
    "man": 1,
    "women": 0
  }, {
    "age_range": "11-20",
    "total_count": 2,
    "man": 0,
    "women": 2
  }]
}]

进入这个

const data = [{
  age_group: '0-20',
  iphone: 26,
  android: 3
}, {
  age_group: '21-30',
  iphone: 0,
  android: 0
}, ];

https://jsfiddle.net/cqmyganr/2

这是我试过的:

const age_group = raw[0].age_data.map(obj => ({
  age_group: obj.age_range
}))

const cams = raw.map(obj => ({
  device_id: obj.device_info.device_id,
  device_name: obj.device_info.name
}))

console.log(cams)

const age_group_with_cams = age_group.map(obj =>
  Object.assign({}, obj, ...cams)
)

console.log(age_group_with_cams)

Answer 1

好的，我会使用 reduce 因为你正在将数据转换成另一种形式 list-of-devices-with-age-info => list -of-ages-with-devices 列表可以有不同的长度。

这将是我的第一步，将所有设备映射到所有现有年龄

const usageByAge = raw.reduce((by_age, dev) => { 
  dev.age_data.forEach(age => {
    if (!by_age[age.age_range]) by_age[age.age_range] = {};
    by_age[age.age_range][dev.device_info.name] = age.total_count;
  })

  return by_age;
}, {})

// output, something like this:
usageByAge = {
  "0-10": { android: 123, iphone: 321 },
  "10-20": { android: 123, iphone: 321 },
}

这里又是一个reduce函数，这次创建一个规则:

isGroupInBounds = (g, lo, hi) => {
  const [gl, gh] = g.split('-');
  return gl >= lo && gh <= hi;
}

["0-20", "21-30"].map(age_group => {
  const group = { age_group, iphone: 0, android: 0 };
  const [l, h] = age_group.split('-')

  Object.keys(usageByAge).forEach(inputGroup => {
    if (isGroupInBounds(inputGroup, l, h)) {
      Object.keys(usageByAge[inputGroup]).forEach(deviceName => {
         group[deviceName] += usageByAge[inputGroup][deviceName];
      })
    }
  })

  return group;
})

是的，这他妈的真的很棘手，已经在你的 fiddle 里试过了，它成功了；)感谢你做这个练习!

https://jsfiddle.net/cqmyganr/1/