Format data in javascript

Question

I am trying to format data for a multi-line chart. I want to format the data based on the Internal and External and also need to add total which is the sum of Internal and External. Need help with the formatting. Thanks in advance!

The sample data is as below:

[
 {
"date": "2021年02月09日",
"value": 1,
"user": "Internal"
},
{
"date": "2021年02月09日",
"value": 1,
"user": "External"
},
{
"date": "2021年02月12日",
"value": 2,
"user": "Internal"
},
{
"date": "2021年02月12日",
"value": 1,
"user": "External"
},
{
"date": "2021年02月14日",
"value": 0,
"user": "External"
},
{
"date": "2021年02月14日",
"value": 2,
"user": "Internal"
}
]

My required output should be:

[
{
"date" : "2021年02月09日",
"Internal": 1,
"External": 1,
"Total" : 2
},
{
"date": "2021年02月12日",
"Internal": 2,
"External": 1,
"Total": 3
},
{
"date": "2021年02月14日",
"Internal": 2,
"External": 0,
"Total": 2
}
]

• cloned: What did you try so far? And why didn't it work?

Answer 1

Can be done easily using reduce

PS: Please also provide your attempt when you ask questions here. It'll help us help you better. Thanks

var input = [{
 date: "2021-02-09",
 value: 1,
 user: "Internal"
 },
 {
 date: "2021-02-09",
 value: 1,
 user: "External"
 },
 {
 date: "2021-02-12",
 value: 2,
 user: "Internal"
 },
 {
 date: "2021-02-12",
 value: 1,
 user: "External"
 },
 {
 date: "2021-02-14",
 value: 0,
 user: "External"
 },
 {
 date: "2021-02-14",
 value: 2,
 user: "Internal"
 }
];
var output = input.reduce((acc, curr) => {
 var existingIndex = (acc || []).findIndex(
 (entry) => entry.date === curr.date
 );
 if (existingIndex !== -1) {
 // Only update the entry
 acc[existingIndex].value += curr.value;
 acc[existingIndex][curr.user] += curr.value;
 } else {
 // Insert new entry
 acc.push({
 date: curr.date,
 Internal: curr.user === "Internal" ? curr.value : 0,
 External: curr.user === "External" ? curr.value : 0,
 value: curr.value
 });
 }
 return acc;
}, []);
console.log(output)

Answer 2

You can loop over data like this and filter out the dates and the internal external counts based on your calculations in a new array

const sampleData = [{
 "date": "2021年02月09日",
 "value": 1,
 "user": "Internal"
 },
 {
 "date": "2021年02月09日",
 "value": 1,
 "user": "External"
 },
 {
 "date": "2021年02月12日",
 "value": 2,
 "user": "Internal"
 },
 {
 "date": "2021年02月12日",
 "value": 1,
 "user": "External"
 },
 {
 "date": "2021年02月14日",
 "value": 0,
 "user": "External"
 },
 {
 "date": "2021年02月14日",
 "value": 2,
 "user": "Internal"
 }
];
let formattedData = [];
sampleData.forEach(item => {
 const itemIndex = formattedData.findIndex(newItem => newItem.date === item.date);
 const internalCount = item.user === "Internal" ? item.value : 0;
 const externalCount = item.user === "External" ? item.value : 0;
 if (formattedData.length === 0 || itemIndex === -1)
 formattedData.push({
 date: item.date,
 internal: internalCount,
 external: externalCount,
 total: internalCount + externalCount
 });
 else {
 formattedData.splice(itemIndex, 1, {
 date: item.date,
 internal: formattedData[itemIndex].internal + internalCount,
 external: formattedData[itemIndex].external + externalCount,
 total: formattedData[itemIndex].total + internalCount + externalCount
 });
 }
});
console.log(formattedData);