We Keep Coding

How to group by and sum an array of objects javascript?

const array = [
{
"data": {
"qty": "5",
"toy": {
"id": 3,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 10,
},
"available": "no"
}
},
{
"data": {
"qty": "59",
"toy": {
"id": 10,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 3,
},
"available": "yes",
}
}
]
var result = [];
array.reduce(function(res, value) {
if (!res['data']['toy'] || !res['data']['toy']['data']) {
res['data'] = {...value['data'] };
result.push(res['data'])
}
if (res['data']['available'] === value['data']['available'] && res['data']['toy']['id'] === value['data']['toy']['id']) {
res['data']['qty'] = parseInt(res['data']['qty']) + parseInt(value['data'].qty)
}
return res;
}, {'data': {}});
console.log(result)
I am working on a js project and I need a bit of help here. From the array, How to get a new array that has qty as the sum of the other qty value which data.toy.id and available same. i.e. I want the below array. My code is not working as excepted. Changes to the same or new code are also fine. Thank you.
const array = [
{
"data": {
"qty": "10",
"toy": {
"id": 3,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 10,
},
"available": "no"
}
},
{
"data": {
"qty": "59",
"toy": {
"id": 10,
},
"available": "yes",
}
}
]

You group the array into an object, where the keys are concatenation of available and id properties and finally transform the object back to an array using Object.values.
const
array = [
{ data: { qty: "5", toy: { id: 3 }, available: "yes" } },
{ data: { qty: "5", toy: { id: 10 }, available: "no" } },
{ data: { qty: "59", toy: { id: 10 }, available: "yes" } },
{ data: { qty: "5", toy: { id: 3 }, available: "yes" } },
],
result = Object.values(
array.reduce((r, { data }) => {
const k = data.available + data.toy.id;
if (r[k]) {
r[k].data.qty = String(Number(r[k].data.qty) + Number(data.qty));
} else {
r[k] = { data };
}
return r;
}, {})
);
console.log(result);

I'd suggest using Array.reduce() to group by a key, which will be combined value of the toy id and the available property.
We'd create a map of all toys based on this key, summing the quantity for each.
Finally, we'll use Object.values() to convert back into an array.
const array = [ { "data": { "qty": "5", "toy": { "id": 3, }, "available": "yes", } }, { "data": { "qty": "5", "toy": { "id": 10, }, "available": "no" } }, { "data": { "qty": "59", "toy": { "id": 10, }, "available": "yes", } }, { "data": { "qty": "5", "toy": { "id": 3, }, "available": "yes", } } ];
const result = Object.values(array.reduce((acc, { data: { qty, toy, available } }) => {
const key = `${toy.id}-${available}`;
acc[key] = acc[key] || { data: { qty: 0, toy, available } };
acc[key].data.qty += Number(qty);
return acc;
}, {}))
console.log('Result:', result)
.as-console-wrapper { max-height: 100% !important; }

You can use Array#reduce() to create arrayHash object using as keys: ${c.data.toy.id}-${c.data.available}
Code:
const array = [{data: {qty: '5',toy: {id: 3,},available: 'yes',},},{data: {qty: '5',toy: {id: 10,},available: 'no',},},{data: {qty: '59',toy: {id: 10,},available: 'yes',},},{data: {qty: '5',toy: {id: 3,},available: 'yes',},},]
const arrayHash = array.reduce((a, { data }) => {
const key = `${data.toy.id}-${data.available}`
a[key] = a[key] || { data: { ...data, qty: 0 } }
a[key].data.qty = (+a[key].data.qty + +data.qty).toString();
return a
}, {})
const result = Object.values(arrayHash)
console.log(result)

I'd use just reduce
const a1 = [
{
"data": {
"qty": "5",
"toy": {
"id": 3,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 10,
},
"available": "no"
}
},
{
"data": {
"qty": "59",
"toy": {
"id": 10,
},
"available": "yes",
}
},
{
"data": {
"qty": "5",
"toy": {
"id": 3,
},
"available": "yes",
}
}
]
const a2 = a1.reduce((acc, it) => {
let found = acc.find(
dp => dp.data.toy.id === it.data.toy.id && dp.data.available === it.data.available
)
if(found){
found.data.qty = ( Number(found.data.qty) + Number(it.data.qty) ).toString()
}
else acc.push(it)
return acc
}, [])
console.log(JSON.stringify(a2, null,2))

Is there a better/more efficient way to achieve this?

I'm learning Javascript and getting started with React. I'm attempting to build a Materials-UI's DataGrid and need to structure my data accordingly. I have the following piece of code that prepares the Rows and Columns for DataGrid but I feel it may be "slow" and wondering if I can get the community's input on how it can be written more efficiently. Any ideas/solutions would be appreciated. Thanks.
input:
const values = [
{
"documentId": "12345",
"documentDirectory": "Canadian PnC",
"properties": [
{
"name": "HoldingNumber",
"type": "STRING",
"value": "88888",
},
{
"name": "DocumentType",
"type": "STRING",
"value": "TAC",
},
{
"name": "DocumentName",
"type": "STRING",
"value": "Income",
},
]
},
{
"documentId": "54321",
"documentDirectory": "Wealth",
"properties": [
{
"name": "HoldingNumber",
"type": "STRING",
"value": "99999",
},
{
"name": "DocumentType",
"type": "STRING",
"value": "TAC",
},
{
"name": "DocumentName",
"type": "STRING",
"value": "Appraisal",
},
]
}
];
output:
//console.log(cols);
[
{
field: "DocumentDirectory", headerName: "DocumentDirectory", width: 200
},
{
field: "DocumentId", headerName: "DocumentId", width: 200
},
{
field: "HoldingNumber", headerName: "HoldingNumber", width: 200
},
{
field: "DocumentType", headerName: "DocumentType", width: 200
},
{
field: "DocumentName", headerName: "DocumentName", width: 200
}
]
//console.log(rows);
[
{
id: 0,
DocumentDirectory: "Canadian PnC",
DocumentId: "12345",
HoldingNumber: "88888",
DocumentType: "TAC",
DocumentName: "Income"},
{
id: 1,
DocumentDirectory: "Wealth",
DocumentId: "54321",
HoldingNumber: "99999",
DocumentType: "TAC",
DocumentName: "Appraisal"
}
]
I'm currently achieving it the using the following:
const docDirectory = values.map(result => result.documentDirectory);
const docId = values.map(result => result.documentId);
const docProperties = values.map(result => result.properties);
let cols= [];
let rows= [];
for (let i = 0; i < docProperties.length; i++) {
const p = docProperties[i];
let o = {};
o["id"] = i;
o["DocumentDirectory"] = docDirectory[i];
o["DocumentId"] = docId[i];
if (i === 0) {
cols.push({ field: "DocumentDirectory", headerName: "DocumentDirectory", width: 200 });
cols.push({ field: "DocumentId", headerName: "DocumentId", width: 200 });
}
for (let j = 0; j < p.length; j++) {
let nam = p[j].name;
let val = p[j].value;
o[nam.replace(/\s+/, "")] = val;
if (i === 0) {
cols.push({ field: nam.replace(/\s+/, ""), headerName: nam, width: 200 });
}
}
rows.push(o);
}
console.log(cols);
console.log(rows);

const values = [
{
documentId: '12345',
documentDirectory: 'Canadian PnC',
properties: [
{
name: 'HoldingNumber',
type: 'STRING',
value: '88888'
},
{
name: 'DocumentType',
type: 'STRING',
value: 'TAC'
},
{
name: 'DocumentName',
type: 'STRING',
value: 'Income'
}
]
},
{
documentId: '54321',
documentDirectory: 'Wealth',
properties: [
{
name: 'HoldingNumber',
type: 'STRING',
value: '99999'
},
{
name: 'DocumentType',
type: 'STRING',
value: 'TAC'
},
{
name: 'DocumentName',
type: 'STRING',
value: 'Appraisal'
}
]
}
];
const cols = [
{
field: 'DocumentDirectory',
headerName: 'DocumentDirectory',
width: 200
},
{
field: 'DocumentId',
headerName: 'DocumentId',
width: 200
},
...values[0].properties.map(p => ({
field: p.name,
headerName: p.name,
width: 200
}))
];
const rows = values.map((value, index) => {
return {
id: index,
DocumentDirectory: value.documentDirectory,
DocumentId: value.documentId,
...value.properties.reduce(
(val, cur) => ({
...val,
[cur.name]: cur.value
}),
{}
)
};
});
console.log(cols);
console.log(rows);

const values = [{
"documentId": "12345",
"documentDirectory": "Canadian PnC",
"properties": [{
"name": "HoldingNumber",
"type": "STRING",
"value": "88888",
},
{
"name": "DocumentType",
"type": "STRING",
"value": "TAC",
},
{
"name": "DocumentName",
"type": "STRING",
"value": "Income",
},
]
},
{
"documentId": "54321",
"documentDirectory": "Wealth",
"properties": [{
"name": "HoldingNumber",
"type": "STRING",
"value": "99999",
},
{
"name": "DocumentType",
"type": "STRING",
"value": "TAC",
},
{
"name": "DocumentName",
"type": "STRING",
"value": "Appraisal",
},
]
}
];
const allCols = values.reduce((prev, { documentDirectory, properties }) => ([
...prev,
{ field: documentDirectory, headerName: documentDirectory, width: 200 },
...properties.map(({name: field, name: headerName}) => ({field, headerName, width: 200}))
]), [])
const cols = [...new Set(allCols.map(JSON.stringify))].map(JSON.parse)
console.log(cols)
const rows = values.reduce((prev, next) => ([
...prev,
...next.properties.map(property => ({
DocumentDirectory: next.DocumentDirectory,
DocumentId: next.DocumentId,
...property
}))
]), []).map((row, key) => ({id: key, ...row}))
console.log(rows)

Stacked bars in Charts.js from a JSON list of objects

i'm trying to create a Charts.js with stacked bars from a json list of objects, with no success...
my json is
[{
"machine": {
"machineId": 1,
"name": "a",
"description": "aaaaaa",
"active": true,
"direction": "IN"
},
"realEnergy": 56.99,
"lastUpdate": "2018-10-16 09:00:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 62.11,
"lastUpdate": "2018-10-16 09:00:00"
}, {
"machine": {
"machineId": 1,
"name": "M1",
"description": "Machine M1",
"active": true,
"direction": "IN"
},
"realEnergy": 57.11,
"lastUpdate": "2018-10-16 09:30:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 62.14,
"lastUpdate": "2018-10-16 09:30:00"
}, {
"machine": {
"machineId": 1,
"name": "M1",
"description": "Machine M1",
"active": true,
"direction": "IN"
},
"realEnergy": 58.18,
"lastUpdate": "2018-10-16 10:00:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 71.11,
"lastUpdate": "2018-10-16 10:00:00"
}, {
"machine": {
"machineId": 1,
"name": "M1",
"description": "Machine M1",
"active": true,
"direction": "IN"
},
"realEnergy": 64.11,
"lastUpdate": "2018-10-16 10:30:00"
}, {
"machine": {
"machineId": 2,
"name": "ABCD 1",
"description": "ABCD 1",
"active": true,
"direction": "OUT"
},
"realEnergy": 72.11,
"lastUpdate": "2018-10-16 10:30:00"
}]
I would like to have lastUpdate on the labels and stacked realEnergy values for the bars.
I was trying to adopt this json to match Charts.js dataset with no luck.
var size = Object.keys(json).length ;
labels = response.map(function(e) {
return e.lastUpdate;
});
for(var i = 0; i < size; i++){
datasetValue[i] = {
fillColor: 'rgba(220,220,220,0.5)',
strokeColor :'rgba(220,220,220,1)',
label :json[i].machine.name,
data : json[i].realEnergy
}
}
var myData = {
datasets : datasetValue
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets:myData
},
options: {
scales: {
yAxes: [{
stacked: true
}],
xAxes: [{
stacked: true
}]
}
}
});
}
I can get the labels correctly but no data on it, cannot understand how the dataset values should be created.

Dataset's data property is an array of values that will be distributed across the labels (in this case realEnergy value per each lastUpdate). I assume that each dataset should represent particular machine.
Here's the code to generate datasets and labels based on your JSON data:
const jsonData = JSON.parse(yourJSONData);
const colors = ['yellow', 'green', 'blue']; // purely optional
const machines = jsonData.reduce((uniqueMachines, record) => {
// find unique machines that will be base to our datasets
if (!uniqueMachines.find(machine => machine.machineId === record.machine.machineId))
uniqueMachines.push(record.machine);
return uniqueMachines;
}, []);
const lastUpdates = jsonData.reduce((uniqueLastUpdates, record) => {
// get labels for our chart
if (!uniqueLastUpdates.find(lastUpdate => lastUpdate === record.lastUpdate))
uniqueLastUpdates.push(record.lastUpdate);
return uniqueLastUpdates;
}, []);
const datasets = machines.map((machine, index) => {
const label = machine.name;
const backgroundColor = colors[index]; // purely optional
const data = lastUpdates.map(lastUpdate => {
const valueRecord = jsonData.find(record => record.machine.machineId === machine.machineId && record.lastUpdate === lastUpdate);
if (!valueRecord) return 0; // if value record is not defined, return 0;
return valueRecord.realEnergy;
});
return {
// here we return dataset
label,
backgroundColor,
data,
stack: 'main' // here we define the stack
};
});
And here's the final configuration for the chart:
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: lastUpdates,
datasets
},
options: {
scales: {
yAxes: [{
stacked: true
}]
}
}
});
A working example on the JSFiddle: click

Create JSON based another JSON as key and value?

I have json like
SampJson= [
{
data: "50",
cIndex: "column0",rowno:"1"
},
{
data: "5",
cIndex: "column1",rowno:"1"
},
{
data: "80",
cIndex: "column0",rowno:"2"
},
{
data: "65",
cIndex: "column1",rowno:"2"
}
];
I need to create a JSON like
[
{
rowno:1,
column0:50,
column1:5
},
{
rowno:2,
column0:80,
column1:65
}
];
Thanks in advance...

You should just do this:
sampJson = [
{
data: "50",
cIndex: "column0",
rowno: "1"
},
{
data: "5",
cIndex: "column1",
rowno: "1"
},
{
data: "80",
cIndex: "column0",
rowno: "2"
},
{
data: "65",
cIndex: "column1",
rowno: "2"
}
];
var results = [];
sampJson.forEach(function(el) {
if (results[+el.rowno - 1] == null) {
results[+el.rowno - 1] = new Object();
}
results[+el.rowno - 1].rowno = +el.rowno;
results[+el.rowno - 1][el.cIndex] = +el.data;
});
console.log(results);

How to intergrate a for loop to Fusion Charts

I want to add a for loop to my FusionChart script, so i can enter values through the loop. but so far i could not do it. please help. this is the code. what can i do to make this loop work?
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'column3d',
renderAt: 'chartContainer',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
},
"data": [
//for (var i = 0; i < ist.length; i++) {// this is where i want to add the loop
{
"label": ist[0].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[0].MyProperty_Test_Chargers)
},
{
"label": ist[1].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[1].MyProperty_Test_Chargers)
},
{
"label": ist[2].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[2].MyProperty_Test_Chargers)
}
//}
]
}
});
revenueChart.render();
});

OK, so the data attribute needs to be an array. You can achieve this with a for loop if it is inside of a so-called IIFE and having the IFFE return an array (note that you would put the following inside the chart configuration):
"data": (function() {
var data = [];
for (var i = 0; i < ist.length; i++) {
data.push({
"label": ist[i].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[i].MyProperty_Test_Chargers)
})
}
return data;
})()
Better yet, create the array you need using the for loop above var revenueChart = new FusionCharts({...:
var chartData = [];
for (var i = 0; i < ist.length; i++) {
chartData.push({
"label": ist[i].MyProperty_Test_Customer_Id,
"value": parseFloat(ist[i].MyProperty_Test_Chargers)
})
}
var revenueChart = new FusionCharts({
...
data: chartData
...

FusionCharts.ready(function () {
var data = [];
//alert(x.length);
for (var i = 0; i < x.length; i++) {
data.push({
"label": x[i].HR_BG,
"value": x[i].b
})
}
var ageGroupChart = new FusionCharts({
type: 'pie3d',
renderAt: 'chart-pie',
width: '600',
height: '500',
dataFormat: 'json',
dataSource:
{
"chart": {
"caption": "YTR Production Hours",
"subCaption": "",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor": "#ffffff",
"showBorder": "0",
"use3DLighting": "0",
"showShadow": "0",
"enableSmartLabels": "0",
"startingAngle": "0",
"showPercentValues": "0",
"showPercentInTooltip": "0",
"decimals": "",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"showHoverEffect":"1",
"showLegend": "1",
"legendBgColor": "#ffffff",
"legendBorderAlpha": '0',
"legendShadow": '0',
"legendItemFontSize": '10',
"legendItemFontColor": '#666666'
},
"data": data
}
}).render();
});