I am using .map() to cycle through an object and places some values in to a 2nd object.
I am doing this as such:
function convertGraphItems(name, data) {
return ({ name, data, type: 'bar', stack: true });
}
var generatedArr = [...dataByAccountName.entries()].map(convertGraphItems);
However, I seem to be unable to assign 'name' and 'data' to their respective keys.
I have tried return ({ name: name, data: data, type: 'bar', stack: true }); but this does not achieve what I want.
My desired result should look like:
[
{
"name": "Savings",
"data": [
5474.18,
114031.26,
127890.72
],
"type": "bar",
"stack": true
}
]
But my current result is:
[
{
"name": [
"Savings",
[
5474.18,
114031.26,
127890.72
]
],
"data": 0,
"type": "bar",
"stack": true
}
]
Would anyone know how I could assign data and name to their respective keys?
EDIT: source array looks like:
[
{
"key": "Savings",
"value": [
5474.18,
114031.26,
127890.72
]
},
]
The first two arguments passed to the Array.prototype.map() callback are
element
The current element being processed in the array.
index
The index of the current element being processed in the array.
It seems unlikely that you'd want data to be the index.
const dataByAccountName = [{"key":"Savings","value":[5474.18,114031.26,127890.72]}]
const generatedArr = dataByAccountName.map(({ key: name, value: data }) => ({
name,
data,
type: "bar",
stack: true
}))
console.log(generatedArr).as-console-wrapper { max-height: 100% !important; }If you're using something else that produces entries (like a Map), then this is how you'd map it
const dataByAccountName = new Map()
dataByAccountName.set("Savings", [
5474.18,
114031.26,
127890.72
])
const generatedArr = Array.from(dataByAccountName, ([ name, data ]) => ({
name,
data,
type: "bar",
stack: true
}))
console.log(generatedArr).as-console-wrapper { max-height: 100% !important; }I've used Array.from() since IMO it looks better than [...map.entries()].map() and achieves exactly the same thing.
Note that the first (and only) argument passed to the mapping callback is a destructured array as opposed to two separate args.
You are passing convertGraphItems function into map and you are expecting name as key and data as value, but this is not the case here.
In map the first argument is the value and second is the index.
You have to make convertGraphItems compatible so you can pass value externally as:
[...dataByAccountName.entries()].map(function ([_, { key, value }]) {
return convertGraphItems(key, value);
});
const dataByAccountName = [
{
key: "Savings",
value: [5474.18, 114031.26, 127890.72],
},
];
function convertGraphItems(name, data) {
return { name, data, type: "bar", stack: true };
}
var generatedArr = [...dataByAccountName.entries()].map(function ([, v]) {
const { key, value } = v;
return convertGraphItems(key, value);
});
console.log(generatedArr);If you have the source array already available as you included in the question, you don't need a separate function for it.
const sources = [{
"key": "Savings",
"value": [5474.18, 114031.26, 127890.72]
}]
const parsedData = sources.map(({key, value}) => ({
name: key,
data: value,
type: 'bar',
stack: true
}));
console.log(parsedData)