I have an object, where i want to calculate the percentage and display in the maps, currently the data i am getting is a raw data in an object.
Here is the object that i am receiving from backend
[{
"date": "26/08/2021",
"walking": 965.2107,
"running": 964.0539,
"sleeping": 962.1473,
"swimming": 961.8081,
"studying": 961.5081,
}]
Based on the object i want the percentage to be calculated and replaced in the respective key/value pair. It will take the object value, sum it up and calculate the percentage. This is what i am expecting to return
[{
"date": "26/08/2021",
"walking": 20,
"running": 20,
"sleeping": 20,
"swimming": 20,
"studying": 20,
}]
Array.prototype.map and Array.prototype.reduce (over object keys) is all you need,
const arr = [{
"date": "26/08/2021",
"walking": 965.2107,
"running": 964.0539,
"sleeping": 962.1473,
"swimming": 961.8081,
"studying": 961.5081,
}];
const transformedArr = arr.map((item) => {
const totalSum = Object.keys(item).reduce((prev, key) => {
if(key === "date") return 0;
return prev + item[key];
}, 0);
return Object.keys(item).reduce((prev, key) => {
if(key === "date") return {...prev, [key]: item[key] };
return {...prev, [key]: (item[key]/totalSum) * 100 }
}, {});
});
console.log(transformedArr);PS: If you want a strict integer value, you can use parseInt, Math.ceil or Math.round depending on your need
const data = [{
"date": "26/08/2021",
"walking": 965.2107,
"running": 964.0539,
"sleeping": 962.1473,
"swimming": 961.8081,
"studying": 961.5081,
}];
const dataInPerCents = data.map(item => {
const itemCopy = {...item};
const keys = Object.keys(itemCopy).filter(key => key !== "date");
const sum = keys.reduce((sum, key) => sum + itemCopy[key], 0);
keys.forEach(key => itemCopy[key] = Math.round(100 * itemCopy[key] / sum));
itemCopy.top3 = keys.sort((key1, key2) => item[key2] - item[key1]).slice(0, 3); // Asked in comment below
return itemCopy;
});
console.log(dataInPerCents);