时间戳

首页 > 解决方案 > 将数据从一种对象数组转换为另一种对象

javascript - 将数据从一种对象数组转换为另一种对象

问题描述

有一组来自服务器的动态数据，如下所示：

dataSet = [
 {vid: "General uneven corrosion", mk: "Visual measurement control",  ver: "95"}, 
 {vid: "General uneven corrosion", mk: "Ultrasonic thickness measurement", ver: "95"},
 {vid: "General uneven corrosion", mk: "Ultrasonic flaw detection", ver: "80"},
 {vid: "General uneven corrosion", mk: "Radiographic control", ver: "80"},
 {vid: "General uneven corrosion", mk: "Eddy current control", ver: "60"},
 {vid: "General uneven corrosion", mk: "Magnetic control", ver: "20"},
 {vid: "General uneven corrosion", mk: "Metallographic research", ver: "20"},
 {vid: "Increase in strength characteristics", mk: "Mechanical property studies", ver: "80"},
 {vid: "Increase in strength characteristics", mk: "Coercimetry", ver: "40"},
 {vid: "Increase in strength characteristics", mk: "Metallographic research", ver: "40"},
 {vid: "Increase in hardness", mk: "Mechanical property studies", ver: "95"},
 {vid: "Increase in hardness", mk: "Coercimetry", ver: "60"},
 {vid: "Increase in hardness", mk: "Metallographic research", ver: "40"},
 {vid: "Decreased ductility", mk: "Coercimetry", ver: "60"},
 {vid: "Decreased ductility", mk: "Mechanical property studies", ver: "60"},
 {vid: "Decreased ductility", mk: "Acoustic emission control", ver: "60"},
 {vid: "Decreased ductility", mk: "Magnetic control", ver: "60"},
 {vid: "Decreased ductility", mk: "Eddy current control", ver: "40"},
 {vid: "Decreased ductility", mk: "Metallographic research", ver: "40"},
 {vid: "Decreased ductility", mk: "Visual measurement control", ver: "20"}
];

要使用 D3 绘制分组条形图，我需要将数据转换为以下对象数组：

data = [
  {State: "General uneven corrosion", Visual measurement control: 95, Ultrasonic thickness measurement: 95, Ultrasonic flaw detection: 80, Radiographic control: 80, Eddy current control: 60, Magnetic control: 20, Metallographic research: 20, Mechanical property studies: 0, Coercimetry: 0, Acoustic emission control: 0},
  {State: "Increase in strength characteristics", Visual measurement control: 0, Ultrasonic thickness measurement: 0, Ultrasonic flaw detection: 0, Radiographic control: 0, Eddy current control: 0, Magnetic control: 0, Metallographic research: 40, Mechanical property studies: 80, Coercimetry: 40, Acoustic emission control: 0},
  {State: "Increase in hardness", Visual measurement control: 0, Ultrasonic thickness measurement: 0, Ultrasonic flaw detection: 0, Radiographic control: 0, Eddy current control: 0, Magnetic control: 0, Metallographic research: 40, Mechanical property studies: 95, Coercimetry: 60, Acoustic emission control: 0},
  {State: "Decreased ductility", Visual measurement control: 20, Ultrasonic thickness measurement: 0, Ultrasonic flaw detection: 0, Radiographic control: 0, Eddy current control: 40, Magnetic control: 60, Metallographic research: 40, Mechanical property studies: 60, Coercimetry: 60, Acoustic emission control: 60}, 
  columns: ["State", "Visual measurement control", "Ultrasonic thickness measurement", "Ultrasonic flaw detection", "Radiographic control", "Eddy current control", "Magnetic control", "Metallographic research", "Mechanical property studies", "Coercimetry", "Acoustic emission control"]
  y: "Detectability"
];

这是每个状态都具有唯一值vid并且最终数据数组的每个对象都包含一组mk的地方。对于每个对象，mk在set中的顺序是一样的，每个mk的值对应于初始dataSet，如果没有该物种的数据则取0。

我可以获得特定键的唯一值数组，

let allMk = []
dataSet.forEach(item => {
     allMk.push(item.mk)
});
let allMkUni = new Set (allMk)

但我不明白如何正确地将对象转换为所需的形式。请帮忙。谢谢

标签： javascriptarraysobjectd3.js

解决方案

可能最容易到reduce()中间对象，然后是数组map()的条目：

const data = [
 {vid: "General uneven corrosion", mk: "Visual measurement control",  ver: "95"}, 
 {vid: "General uneven corrosion", mk: "Ultrasonic thickness measurement", ver: "95"},
 {vid: "General uneven corrosion", mk: "Ultrasonic flaw detection", ver: "80"},
 {vid: "General uneven corrosion", mk: "Radiographic control", ver: "80"},
 {vid: "General uneven corrosion", mk: "Eddy current control", ver: "60"},
 {vid: "General uneven corrosion", mk: "Magnetic control", ver: "20"},
 {vid: "General uneven corrosion", mk: "Metallographic research", ver: "20"},
 {vid: "Increase in strength characteristics", mk: "Mechanical property studies", ver: "80"},
 {vid: "Increase in strength characteristics", mk: "Coercimetry", ver: "40"},
 {vid: "Increase in strength characteristics", mk: "Metallographic research", ver: "40"},
 {vid: "Increase in hardness", mk: "Mechanical property studies", ver: "95"},
 {vid: "Increase in hardness", mk: "Coercimetry", ver: "60"},
 {vid: "Increase in hardness", mk: "Metallographic research", ver: "40"},
 {vid: "Decreased ductility", mk: "Coercimetry", ver: "60"},
 {vid: "Decreased ductility", mk: "Mechanical property studies", ver: "60"},
 {vid: "Decreased ductility", mk: "Acoustic emission control", ver: "60"},
 {vid: "Decreased ductility", mk: "Magnetic control", ver: "60"},
 {vid: "Decreased ductility", mk: "Eddy current control", ver: "40"},
 {vid: "Decreased ductility", mk: "Metallographic research", ver: "40"},
 {vid: "Decreased ductility", mk: "Visual measurement control", ver: "20"}
];

const result = Object.entries(data.reduce((a, {vid, mk, ver}) => {
  a[vid] = a[vid] || {};
  a[vid][mk] = ver;
  return a;
}, {})).map(([k, v]) => ({State: k, ...v}));

console.log(result)

推荐阅读