Using lodash to retrieve values from a complex array - lodash

Question

I have the following complex array
[
{
label: "Country1",
metrics: [
{
label: "xyz",
metric: "xyz",
value: 234184
},
{
label: "abc",
metric: "abc",
value: 145678
}
]
},
{
label: "Country2",
metrics: [
{
label: "xyz",
metric: "xyz",
value: 123456
},
{
label: "abc",
metric: "abc",
value: 456789
}
]
},
{
label: "Country3",
metrics: [
{
label: "xyz",
metric: "xyz",
value: 62389
},
{
label: "abc",
metric: "abc",
value: 4964738
}
]
}
]
I need to convert it to the following simple array wherein from the metrics sub array the values for label and value becomes a key value pair.
[
{label: “Country1”, xyz: 234184, abc: 145678},
{label: “Country2”, xyz: 123456, abc: 456789},
{label: “Country3”, xyz: 62389, abc: 4964738}
]
Can this conversion happen using lodash?

Answer 1

There might be a better / cleaner way to do this, but this is what I could come up with in just a few minutes.
const inputData = [
{
label: "Country1",
metrics: [
{
label: "xyz",
metric: "xyz",
value: 234184
},
{
label: "abc",
metric: "abc",
value: 145678
}
]
},
{
label: "Country2",
metrics: [
{
label: "xyz",
metric: "xyz",
value: 123456
},
{
label: "abc",
metric: "abc",
value: 456789
}
]
},
{
label: "Country3",
metrics: [
{
label: "xyz",
metric: "xyz",
value: 62389
},
{
label: "abc",
metric: "abc",
value: 4964738
}
]
}
];
const newData = _.map(inputData, first => {
const additional = _.map(first.metrics, metric => [metric.label, metric.value]);
return _.assign({}, _.fromPairs(additional), {
label: first.label
});
});
console.log(newData);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.js"></script>

Answer 2

Here's a solution that doesn't require lodash, you simply have to take advantage of using Array#map to transform each item in the top-level array, and then use Array#reduce to transform the object and get the rest of the properties you need. The methodology used below takes advantage of the following ES6 features:
Destructuring assignment to extract the properties from the Array#map and Array#reduce callbacks.
Spread Syntax to combine properties of objects from different sources.
Computed property names for a dynamic property name in an object.
var result = data.map(({ label, metrics }) =>
metrics.reduce(
(result, { metric, value }) => ({ ...result, [metric]: value }),
{ label }
)
);
var data = [{label:"Country1",metrics:[{label:"xyz",metric:"xyz",value:234184},{label:"abc",metric:"abc",value:145678}]},{label:"Country2",metrics:[{label:"xyz",metric:"xyz",value:123456},{label:"abc",metric:"abc",value:456789}]},{label:"Country3",metrics:[{label:"xyz",metric:"xyz",value:62389},{label:"abc",metric:"abc",value:4964738}]}];
var result = data.map(({ label, metrics }) =>
metrics.reduce(
(result, { metric, value }) => ({ ...result, [metric]: value }),
{ label }
)
);
console.log(result);
.as-console-wrapper{min-height:100%;top:0}