Converting data from an array of objects of one kind to another

Question

There is a set of data that comes dynamically from the server and looks like this:

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"}
];

To plot a grouped bar chart graph using D3, I need to transform the data into the following array of objects:

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"
];

This is where the every State takes on a unique value of vid and every object of final data array contains set of mk. For each object, the order of mk in set is the same, and the value of each mk corresponds to the initial dataSet, or takes 0 if there is no data for this species.

I can get arrays of unique values of a particular key,

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

but I do not understand how to correctly convert objects to the desired form. Help please. Thanks

Your expected result is invalid JavaScript.

Robby Cornelissen
– Robby Cornelissen

2021-01-19 06:53:55 +00:00
Commented Jan 19, 2021 at 6:53 — Robby Cornelissen
– Robby Cornelissen, Commented Jan 19, 2021 at 6:53

Robby Cornelissen · Accepted Answer · 2021-01-19 06:46:02Z

1

Probably easiest to reduce() to an intermediate object, and then map() the entries to an array:

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)

answered Jan 19, 2021 at 6:46

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Евгений Стужук Over a year ago

Thank you very much! It's amazing how quickly you did it! The last question is, what about the same data set and their order in each final objects? Is it possible?

Robby Cornelissen Over a year ago

I don't know exactly what you mean, but properties in JavaScript are typically considered to be unordered. I would update my answer to add the columns that you mentioned in your question, but your expected output is not valid, so I don't know exactly what you need.

Евгений Стужук Over a year ago

I mean, each of the objects in the resulting array must have the same set of keys. Regardless of whether they exist in the source data. The values of these keys are taken from the original dataset, if it exists, or equal to 0, if such a property does not exist. Because I need to display all data on a graph, even those that are 0

Robby Cornelissen Over a year ago

Easiest way to do that would be to define a default object containing all keys with zero values, and then clone that every time. So instead of a[vid] = a[vid] || {};, it would become a[vid] = a[vid] || {...defaultValues};

Collectives™ on Stack Overflow

Converting data from an array of objects of one kind to another

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related