Develop Reference

Getting unique objects in array based on 2 object property values in Javascript [duplicate]

Grouping elements in array by multiple properties is the closest match to my question as it indeed groups objects by multiple keys in an array. Problem is this solution doesn't sum up the properties value then remove the duplicates, it instead nests all the duplicates in a two-dimensional arrays.
Expected behavior
I have an array of objects which must be grouped by shape and color.
var arr = [
{shape: 'square', color: 'red', used: 1, instances: 1},
{shape: 'square', color: 'red', used: 2, instances: 1},
{shape: 'circle', color: 'blue', used: 0, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 4},
{shape: 'circle', color: 'red', used: 1, instances: 1},
{shape: 'circle', color: 'red', used: 1, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 5},
{shape: 'square', color: 'red', used: 2, instances: 1}
];
Objects in this array are considered duplicates only if both their shape and color are the same. If they are, I want to respectively sum up their used and instances values then delete the duplicates.
So in this example result array may only contain four combinations : square red, square blue, circle red, circle blue
Problem
I tried a simpler approach here:
var arr = [
{shape: 'square', color: 'red', used: 1, instances: 1},
{shape: 'square', color: 'red', used: 2, instances: 1},
{shape: 'circle', color: 'blue', used: 0, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 4},
{shape: 'circle', color: 'red', used: 1, instances: 1},
{shape: 'circle', color: 'red', used: 1, instances: 0},
{shape: 'square', color: 'red', used: 4, instances: 4},
{shape: 'square', color: 'red', used: 2, instances: 2}
];
result = [];
arr.forEach(function (a) {
if ( !this[a.color] && !this[a.shape] ) {
this[a.color] = { color: a.color, shape: a.shape, used: 0, instances: 0 };
result.push(this[a.color]);
}
this[a.color].used += a.used;
this[a.color].instances += a.instances;
}, Object.create(null));
console.log(result);
but it outputs
[{shape: "square", color: "red", used: 11, instances: 9},
{shape: "circle", color: "blue", used: 4, instances: 4}]
instead of expected result:
[{shape: "square", color: "red", used: 5, instances: 3},
{shape: "circle", color: "red", used: 2, instances: 1},
{shape: "square", color: "blue", used: 11, instances: 9},
{shape: "circle", color: "blue", used: 0, instances: 0}]
How can I get my function to properly group the objects by shape and color ? i.e. sum up their values and remove the duplicates ?

Use Array#reduce with a helper object to group similar objects. For each object, check if the combined shape and color exists in the helper. If it doesn't, add to the helper using Object#assign to create a copy of the object, and push to the array. If it does, add it's values to used and instances.
var arr = [{"shape":"square","color":"red","used":1,"instances":1},{"shape":"square","color":"red","used":2,"instances":1},{"shape":"circle","color":"blue","used":0,"instances":0},{"shape":"square","color":"blue","used":4,"instances":4},{"shape":"circle","color":"red","used":1,"instances":1},{"shape":"circle","color":"red","used":1,"instances":0},{"shape":"square","color":"blue","used":4,"instances":5},{"shape":"square","color":"red","used":2,"instances":1}];
var helper = {};
var result = arr.reduce(function(r, o) {
var key = o.shape + '-' + o.color;
if(!helper[key]) {
helper[key] = Object.assign({}, o); // create a copy of o
r.push(helper[key]);
} else {
helper[key].used += o.used;
helper[key].instances += o.instances;
}
return r;
}, []);
console.log(result);
If you can use ES6, you use a Map to collect the values, and then convert it back to an array by spreading the Map#values:
const arr = [{"shape":"square","color":"red","used":1,"instances":1},{"shape":"square","color":"red","used":2,"instances":1},{"shape":"circle","color":"blue","used":0,"instances":0},{"shape":"square","color":"blue","used":4,"instances":4},{"shape":"circle","color":"red","used":1,"instances":1},{"shape":"circle","color":"red","used":1,"instances":0},{"shape":"square","color":"blue","used":4,"instances":5},{"shape":"square","color":"red","used":2,"instances":1}];
const result = [...arr.reduce((r, o) => {
const key = o.shape + '-' + o.color;
const item = r.get(key) || Object.assign({}, o, {
used: 0,
instances: 0
});
item.used += o.used;
item.instances += o.instances;
return r.set(key, item);
}, new Map).values()];
console.log(result);

Use this method to specify multiple properties:
public static groupBy(array, f) {
let groups = {};
array.forEach(function (o) {
var group = JSON.stringify(f(o));
groups[group] = groups[group] || [];
groups[group].push(o);
});
return Object.keys(groups).map(function (group) {
return groups[group];
})
}
Call this method like:
var result = Utils.groupBy(arr, function (item) {
return [item.shape, item.color];
});

You can use reduce() to create one object of unique shape|color properties and Object.values() to return array of those values.
var arr =[{"shape":"square","color":"red","used":1,"instances":1},{"shape":"square","color":"red","used":2,"instances":1},{"shape":"circle","color":"blue","used":0,"instances":0},{"shape":"square","color":"blue","used":4,"instances":4},{"shape":"circle","color":"red","used":1,"instances":1},{"shape":"circle","color":"red","used":1,"instances":0},{"shape":"square","color":"blue","used":4,"instances":5},{"shape":"square","color":"red","used":2,"instances":1}]
var result = Object.values(arr.reduce(function(r, e) {
var key = e.shape + '|' + e.color;
if (!r[key]) r[key] = e;
else {
r[key].used += e.used;
r[key].instances += e.instances
}
return r;
}, {}))
console.log(result)

You could use a hash table and the keys for grouping same groups.
var array = [{ shape: 'square', color: 'red', used: 1, instances: 1 }, { shape: 'square', color: 'red', used: 2, instances: 1 }, { shape: 'circle', color: 'blue', used: 0, instances: 0 }, { shape: 'square', color: 'blue', used: 4, instances: 4 }, { shape: 'circle', color: 'red', used: 1, instances: 1 }, { shape: 'circle', color: 'red', used: 1, instances: 0 }, { shape: 'square', color: 'blue', used: 4, instances: 5 }, { shape: 'square', color: 'red', used: 2, instances: 1 }],
hash = Object.create(null),
grouped = [];
array.forEach(function (o) {
var key = ['shape', 'color'].map(function (k) { return o[k]; }).join('|');
if (!hash[key]) {
hash[key] = { shape: o.shape, color: o.color, used: 0, instances: 0 };
grouped.push(hash[key]);
}
['used', 'instances'].forEach(function (k) { hash[key][k] += o[k]; });
});
console.log(grouped);
.as-console-wrapper { max-height: 100% !important; top: 0; }

ES6 answers as requisted by user:
// To call this function:
// const result = this.toolBox.multipleGroupByArray(
// dataArray, (property: IProperty) => [property.prop1, property.prop2, property.prop3]);
multipleGroupByArray(dataArray, groupPropertyArray) {
const groups = {};
dataArray.forEach(item => {
const group = JSON.stringify(groupPropertyArray(item));
groups[group] = groups[group] || [];
groups[group].push(item);
});
return Object.keys(groups).map(function(group) {
return groups[group];
});
}

Here is a more general grouping and summing function that accepts an array of objects, an array of keys to group by, and an array of keys to sum.
function groupAndSum(arr, groupKeys, sumKeys){
return Object.values(
arr.reduce((acc,curr)=>{
const group = groupKeys.map(k => curr[k]).join('-');
acc[group] = acc[group] || Object.fromEntries(
groupKeys.map(k => [k, curr[k]]).concat(sumKeys.map(k => [k, 0])));
sumKeys.forEach(k => acc[group][k] += curr[k]);
return acc;
}, {})
);
}
Demo:
var arr = [
{shape: 'square', color: 'red', used: 1, instances: 1},
{shape: 'square', color: 'red', used: 2, instances: 1},
{shape: 'circle', color: 'blue', used: 0, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 4},
{shape: 'circle', color: 'red', used: 1, instances: 1},
{shape: 'circle', color: 'red', used: 1, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 5},
{shape: 'square', color: 'red', used: 2, instances: 1}
];
function groupAndSum(arr, groupKeys, sumKeys){
return Object.values(
arr.reduce((acc,curr)=>{
const group = groupKeys.map(k => curr[k]).join('-');
acc[group] = acc[group] || Object.fromEntries(groupKeys.map(k => [k, curr[k]]).concat(sumKeys.map(k => [k, 0])));
sumKeys.forEach(k => acc[group][k] += curr[k]);
return acc;
}, {})
);
}
const res = groupAndSum(arr, ['shape', 'color'], ['used', 'instances']);
console.log(res);

If you want groupBy keys as per conditional fields then here is the modification for #Abbes answer:
function groupBy(array, f) {
let groups = {};
array.forEach((o) => {
var group = f(o).join('-');
groups[group] = groups[group] || [];
groups[group].push(o);
});
return groups;
}
And use it like:
groupBy(connectedServers, (item) => {
return [item.key1, item.key2];
});

In case if you need an array of 'used' and 'instances' based on the colour or shape property; then you can use this code .
(PS : I know this is not what you are looking for but in future it may help someone. Also am reusing Nenand's code for this purpose . If the code is useful to you just thank him )
var array = [{ shape: 'square', color: 'red', used: 1, instances: 1 }, { shape: 'square', color: 'red', used: 2, instances: 1 }, { shape: 'circle', color: 'blue', used: 0, instances: 0 }, { shape: 'square', color: 'blue', used: 4, instances: 4 }, { shape: 'circle', color: 'red', used: 1, instances: 1 }, { shape: 'circle', color: 'red', used: 1, instances: 0 }, { shape: 'square', color: 'blue', used: 4, instances: 5 }, { shape: 'square', color: 'red', used: 2, instances: 1 }],
hash = Object.create(null),
grouped = [];
array.forEach(function (o) {
var key = ['shape', 'color'].map(function (k) { return o[k]; }).join('|');
if (!hash[key]) {
hash[key] = { shape: o.shape, color: o.color, YourArrayName : [] };
grouped.push(hash[key]);
}
['used'].forEach(function (k) { hash[key]['YourArrayName'].push({ used : o['used'], instances : o['instances'] }) });
});
console.log(grouped);
The output will be in like

I have a suggestion for you.
If you want to make it easier to do, you try the Underscore library : http://underscorejs.org/
I tried quickly to use it and got the right result :
var arr = [
{shape: 'square', color: 'red', used: 1, instances: 1},
{shape: 'square', color: 'red', used: 2, instances: 1},
{shape: 'circle', color: 'blue', used: 0, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 4},
{shape: 'circle', color: 'red', used: 1, instances: 1},
{shape: 'circle', color: 'red', used: 1, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 5},
{shape: 'square', color: 'red', used: 2, instances: 1}
];
var byshape = _.groupBy(arr, 'shape');
var bycolor = _.map(byshape, function(array) {
return _.groupBy(array, 'color')
});
var output = [];
_.each(bycolor, function(arrayOfShape) {
_.each(arrayOfShape, function(arrayOfColor) {
var computedItem = {shape: "", color: "", used: 0, instances: 0};
_.each(arrayOfColor, function(item) {
computedItem.shape = item.shape;
computedItem.color = item.color;
computedItem.used += item.used;
computedItem.instances += item.instances;
});
output.push(computedItem);
});
});
console.log(output);
http://jsfiddle.net/oLyzdoo7/
This solution groups first data, then you can do what you want after, for example, compute data as ypur wish.
Maybe you can optimize it, let me know if you need more help

/**
* Groups an array of objects with multiple properties.
*
* #param {Array} array: the array of objects to group
* #param {Array} props: the properties to groupby
* #return {Array} an array of arrays with the grouped results
*/
const groupBy = ({ Group: array, By: props }) => {
getGroupedItems = (item) => {
returnArray = [];
let i;
for (i = 0; i < props.length; i++) {
returnArray.push(item[props[i]]);
}
return returnArray;
};
let groups = {};
let i;
for (i = 0; i < array.length; i++) {
const arrayRecord = array[i];
const group = JSON.stringify(getGroupedItems(arrayRecord));
groups[group] = groups[group] || [];
groups[group].push(arrayRecord);
}
return Object.keys(groups).map((group) => {
return groups[group];
});
};
Example:
Assume that we have an array of objects. Each object contains info about a person and the money that possess. We want to sum up the money for all persons with the same Nationality and with the same gender.
const data = [
{Name: 'George', Surname: 'Best', Country: 'Great Britain', Gender: 'Male', Money:8000},
{Name: 'Orion', Surname: 'Papathanasiou', Country: 'Greece', Gender: 'Male', Money: 2000},
{Name: 'Mairy', Surname: 'Wellbeck', Country: 'Great Britain', Gender: 'Female', Money:5000},
{Name: 'Thanasis', Surname: 'Papathanasiou', Country: 'Greece',Gender: 'Male', Money: 3200},
{Name: 'George', Surname: 'Washington', Country: 'Great Britain', Gender: 'Male',Money:4200},
{Name: 'Orfeas', Surname: 'Kalaitzis', Country: 'Greece', Gender: 'Male', Money: 7643},
{Name: 'Nick', Surname: 'Wellington', Country: 'USA', Gender: 'Male', Money:1000},
{Name: 'Kostas', Surname: 'Antoniou', Country: 'Greece', Gender: 'Male', Money: 8712},
{Name: 'John', Surname: 'Oneal', Country: 'USA', Gender: 'Male', Money:98234},
{Name: 'Paulos', Surname: 'Stamou', Country: 'Greece', Gender: 'Male', Money: 3422},
{Name: 'Soula', Surname: 'Spuropoulou', Country: 'Greece', Gender: 'Female', Money:400},
{Name: 'Paul', Surname: 'Pierce', Country: 'USA', Gender: 'Male',Money: 13000},
{Name: 'Helen', Surname: 'Smith', Country: 'Great Britain', Gender: 'Female', Money:1000},
{Name: 'Cathrine', Surname: 'Bryant', Country: 'Great Britain', Gender: 'Female', Money: 8712},
{Name: 'Jenny', Surname: 'Scalabrini', Country: 'USA', Gender: 'Female', Money:92214}];
const groupByProperties = ['Country', 'Gender'];
Calling the function:
const groupResult = groupBy( {Group: data, By: groupByProperties} );
The group result is:
(6) [Array(2), Array(5), Array(3), Array(3), Array(1), Array(1)]
0: Array(2)
0: {Name: "George", Surname: "Best", Country: "Great Britain", Gender: "Male", Money: 8000}
1: {Name: "George", Surname: "Washington", Country: "Great Britain", Gender: "Male", Money: 4200}
length: 2
__proto__: Array(0)
1: Array(5)
0: {Name: "Orion", Surname: "Papathanasiou", Country: "Greece", Gender: "Male", Money: 2000}
1: {Name: "Thanasis", Surname: "Papathanasiou", Country: "Greece", Gender: "Male", Money: 3200}
2: {Name: "Orfeas", Surname: "Kalaitzis", Country: "Greece", Gender: "Male", Money: 7643}
3: {Name: "Kostas", Surname: "Antoniou", Country: "Greece", Gender: "Male", Money: 8712}
4: {Name: "Paulos", Surname: "Stamou", Country: "Greece", Gender: "Male", Money: 3422}
length: 5
__proto__: Array(0)
2: Array(3)
0: {Name: "Mairy", Surname: "Wellbeck", Country: "Great Britain", Gender: "Female", Money: 5000}
1: {Name: "Helen", Surname: "Smith", Country: "Great Britain", Gender: "Female", Money: 1000}
2: {Name: "Cathrine", Surname: "Bryant", Country: "Great Britain", Gender: "Female", Money: 8712}
length: 3
__proto__: Array(0)
3: Array(3)
0: {Name: "Nick", Surname: "Wellington", Country: "USA", Gender: "Male", Money: 1000}
1: {Name: "John", Surname: "Oneal", Country: "USA", Gender: "Male", Money: 98234}
2: {Name: "Paul", Surname: "Pierce", Country: "USA", Gender: "Male", Money: 13000}
length: 3
__proto__: Array(0)
4: Array(1)
0: {Name: "Soula", Surname: "Spuropoulou", Country: "Greece", Gender: "Female", Money: 400}
length: 1
__proto__: Array(0)
5: Array(1)
0: {Name: "Jenny", Surname: "Scalabrini", Country: "USA", Gender: "Female", Money: 92214}
length: 1
__proto__: Array(0)
length: 6
__proto__: Array(0)
So, we got 6 arrays. Each array is grouped by Country and by Gender
Iterating over each array, we can sum up the money!
const groupBy = ({ Group: array, By: props }) => {
getGroupedItems = (item) => {
returnArray = [];
let i;
for (i = 0; i < props.length; i++) {
returnArray.push(item[props[i]]);
}
return returnArray;
};
let groups = {};
let i;
for (i = 0; i < array.length; i++) {
const arrayRecord = array[i];
const group = JSON.stringify(getGroupedItems(arrayRecord));
groups[group] = groups[group] || [];
groups[group].push(arrayRecord);
}
return Object.keys(groups).map((group) => {
return groups[group];
});
};
const data = [
{Name: 'George', Surname: 'Best', Country: 'Great Britain', Gender: 'Male', Money:8000},
{Name: 'Orion', Surname: 'Papathanasiou', Country: 'Greece', Gender: 'Male', Money: 2000},
{Name: 'Mairy', Surname: 'Wellbeck', Country: 'Great Britain', Gender: 'Female', Money:5000},
{Name: 'Thanasis', Surname: 'Papathanasiou', Country: 'Greece',Gender: 'Male', Money: 3200},
{Name: 'George', Surname: 'Washington', Country: 'Great Britain', Gender: 'Male',Money:4200},
{Name: 'Orfeas', Surname: 'Kalaitzis', Country: 'Greece', Gender: 'Male', Money: 7643},
{Name: 'Nick', Surname: 'Wellington', Country: 'USA', Gender: 'Male', Money:1000},
{Name: 'Kostas', Surname: 'Antoniou', Country: 'Greece', Gender: 'Male', Money: 8712},
{Name: 'John', Surname: 'Oneal', Country: 'USA', Gender: 'Male', Money:98234},
{Name: 'Paulos', Surname: 'Stamou', Country: 'Greece', Gender: 'Male', Money: 3422},
{Name: 'Soula', Surname: 'Spuropoulou', Country: 'Greece', Gender: 'Female', Money:400},
{Name: 'Paul', Surname: 'Pierce', Country: 'USA', Gender: 'Male',Money: 13000},
{Name: 'Helen', Surname: 'Smith', Country: 'Great Britain', Gender: 'Female', Money:1000},
{Name: 'Cathrine', Surname: 'Bryant', Country: 'Great Britain', Gender: 'Female', Money: 8712},
{Name: 'Jenny', Surname: 'Scalabrini', Country: 'USA', Gender: 'Female', Money:92214}];
const groupByProperties = ['Country', 'Gender'];
const groupResult = groupBy( {Group: data, By: groupByProperties} );
console.log(groupResult);

I found some of these answers a little hard to reuse so here is a reusable function that you can pass in what keys you want your grouping to use.
var arr = [
{shape: 'square', color: 'red', used: 1, instances: 1},
{shape: 'square', color: 'red', used: 2, instances: 1},
{shape: 'circle', color: 'blue', used: 0, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 4},
{shape: 'circle', color: 'red', used: 1, instances: 1},
{shape: 'circle', color: 'red', used: 1, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 5},
{shape: 'square', color: 'red', used: 2, instances: 1}
];
const groupByMultipleKeys = (items, keys) =>
items.reduce((acc, item) => {
const isExistingItem = acc
.flatMap(accItem => accItem)
.find(accItem =>
keys.every(key => accItem[key] === item[key])
)
if (isExistingItem) {
return acc;
}
const allRelatedItems = items.filter(ungroupedItem =>
keys.every(key => ungroupedItem[key] === item[key])
)
acc.push(allRelatedItems)
return acc
}, [])
const groupedItem = groupByMultipleKeys(arr, ['shape', 'color'])
console.log('groupedItem', groupedItem)
List item

var arr = [
{shape: 'square', color: 'red', used: 1, instances: 1},
{shape: 'square', color: 'red', used: 2, instances: 1},
{shape: 'circle', color: 'blue', used: 0, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 4},
{shape: 'circle', color: 'red', used: 1, instances: 1},
{shape: 'circle', color: 'red', used: 1, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 5},
{shape: 'square', color: 'red', used: 2, instances: 1}
];
result = [];
arr.forEach(function (a) {
if ( !this[a.color] && !this[a.shape] ) {
this[a.color] = { color: a.color, shape: a.shape, used: 0, instances: 0 };
result.push(this[a.color]);
}
this[a.color].used += a.used;
this[a.color].instances += a.instances;
}, Object.create(null));
console.log(result);
**Output:**
[
{
"color": "red",
"shape": "square",
"used": 11,
"instances": 9
},
{
"color": "blue",
"shape": "circle",
"used": 4,
"instances": 4
}
]
thats all perfetcly working.
Enjoy your coding....

1.sumkeys
3.groupkeys
var arr = [
{shape: 'square', color: 'red', used: 1, instances: 1},
{shape: 'square', color: 'red', used: 2, instances: 1},
{shape: 'circle', color: 'blue', used: 0, instances: 0},
{shape: 'square', color: 'blue', used: 4, instances: 4},
{shape: 'circle', color: 'red', used: 1, instances: 1},
{shape: 'circle', color: 'red', used: 1, instances: 0},
{shape: 'square', color: 'red', used: 4, instances: 4},
{shape: 'square', color: 'red', used: 2, instances: 2}
];
function groupbykeys(arr, groupKeys, sumKeys){
var hash = Object.create(null),
grouped = [];
arr.forEach(function (o) {
var key = groupKeys.map(function (k) { return o[k]; }).join('|');
if (!hash[key]) {
hash[key] = Object.keys(o).reduce((result, key)=> {
result[key]=o[key];
if(sumKeys.includes(key))
result[key]=0;
return result;
}, { }); //map_(o) //{ shape: o.shape, color: o.color, used: 0, instances: 0 };
grouped.push(hash[key]);
}
sumKeys.forEach(function (k) { hash[key][k] += o[k]; });
});
return grouped;
}
var result=groupbykeys(arr,['shape','color'],['used','instances']);
console.log(result)

Aggregate into an object keyed by the unique combination of shape and color with reduce then take the values out of it:
const aggregate = xs => Object.values(
xs.reduce((acc, {shape, color, used, instances}) => {
const key = shape + color;
acc[key] ??= {shape, color, used: 0, instances: 0};
acc[key].used += used;
acc[key].instances += instances;
return acc;
}, {})
);
console.log(aggregate(arr));
<script>
const arr =
[ {shape: 'square', color: 'red', used: 1, instances: 1}
, {shape: 'square', color: 'red', used: 2, instances: 1}
, {shape: 'circle', color: 'blue', used: 0, instances: 0}
, {shape: 'square', color: 'blue', used: 4, instances: 4}
, {shape: 'circle', color: 'red', used: 1, instances: 1}
, {shape: 'circle', color: 'red', used: 1, instances: 0}
, {shape: 'square', color: 'blue', used: 4, instances: 5}
, {shape: 'square', color: 'red', used: 2, instances: 1}];
</script>

Much more compact ES6 version, which uses JSON.stringify to ensure proper separation between the properties that are being grouped by.
const arr = [{shape: 'square', color: 'red', used: 1, instances: 1}, {shape: 'square', color: 'red', used: 2, instances: 1}, {shape: 'circle', color: 'blue', used: 0, instances: 0}, {shape: 'square', color: 'blue', used: 4, instances: 4}, {shape: 'circle', color: 'red', used: 1, instances: 1}, {shape: 'circle', color: 'red', used: 1, instances: 0}, {shape: 'square', color: 'blue', used: 4, instances: 5}, {shape: 'square', color: 'red', used: 2, instances: 1}];
let grouped = Object.values(arr.reduce((a,c)=> {
let i = a[JSON.stringify([c.shape, c.color])] ??= {...c, used: 0, instances: 0};
i.used += c.used; i.instances += c.instances; return a;
} , {}));
console.log(grouped);
Or, to make it easier to specify arbitrary grouping properties and summing properties:
const arr = [{shape: 'square', color: 'red', used: 1, instances: 1}, {shape: 'square', color: 'red', used: 2, instances: 1}, {shape: 'circle', color: 'blue', used: 0, instances: 0}, {shape: 'square', color: 'blue', used: 4, instances: 4}, {shape: 'circle', color: 'red', used: 1, instances: 1}, {shape: 'circle', color: 'red', used: 1, instances: 0}, {shape: 'square', color: 'blue', used: 4, instances: 5}, {shape: 'square', color: 'red', used: 2, instances: 1}];
function groupAndSum(arr, groupProps, sumProps) {
return Object.values(arr.reduce((a,c)=> {
let i = a[JSON.stringify(groupProps.map(p=>[p,c[p]]))] ??=
{...c, ...Object.fromEntries(sumProps.map(p=>[p, 0]))};
sumProps.forEach(p=>i[p]+=c[p]); return a;
} , {}));
}
console.log(groupAndSum(arr, ['shape', 'color'], ['used', 'instances']));

const v = [{"shape":"square","color":"red","used":1,"instances":1},{"shape":"square","color":"red","used":2,"instances":1},{"shape":"circle","color":"blue","used":0,"instances":0},{"shape":"square","color":"blue","used":4,"instances":4},{"shape":"circle","color":"red","used":1,"instances":1},{"shape":"circle","color":"red","used":1,"instances":0},{"shape":"square","color":"blue","used":4,"instances":5},{"shape":"square","color":"red","used":2,"instances":1}];
function groupBy<T>(
arr: T[],
vInitial: Partial<T>,
fn: (curr: T, acc: T) => void,
...args: Array<keyof T>
) {
return Array.from(
arr
.reduce((r, o) => {
const key = args.map((k) => o[k]).join("|");
const ob = Object.assign({}, o);
const obj = {};
for (const key of Object.keys(ob)) {
if (
vInitial != null &&
vInitial.hasOwnProperty(key) &&
vInitial[key] != null
) {
obj[key] = vInitial[key];
}
}
const item = r.get(key) ?? Object.assign({}, o, obj);
fn(item, o);
return r.set(key, item);
}, new Map<string, T>())
.values(),
);
}
console.log(groupBy(
v,
{},
(item, o) => {
item.used += o.used;
item.instances += o.instances;
},
'shape', 'color'));

Edit multiple value in object based on array

Suppose I have:
const fixed = {pear: 100, apple: 4}
const arr = [
{name: 'P1', pear: 150, apple: 2},
{name: 'P2', pear: 50, apple: 5},
{name: 'P3', pear: 450, apple: 1},
{name: 'P4', pear: 100, apple: 3},
]
and I want to have:
const result = [
{name: 'P1', pear: -50, apple: 2},
{name: 'P2', pear: 50, apple: -1},
{name: 'P3', pear: -350, apple: 3},
{name: 'P4', pear: 0, apple: 1},
]
So result has the same items of arr but with edited apple and pear values based on fixed object values.
The new pear (and apple) value should be fixed.pear - oldPearValue, so for example, for arr[0]:
fixed.pear - arr[0].pear = 100 - 150 = -50 --> result[0].pear = -50
Here is what I tried:
function difference(fixed, value) {
return value - fixed
}
const fixed = {pear: 100, apple: 4}
const arr = [
{name: 'P1', pear: 150, apple: 2},
{name: 'P2', pear: 50, apple: 5},
{name: 'P3', pear: 450, apple: 1},
{name: 'P4', pear: 100, apple: 3},
]
const dataset = arr.flatMap((d) => {
Object.entries(fixed).forEach(([key, value]) => {
return { ...d, [key]: difference(value, d[key]) }
})
})
console.log(dataset)
as you can see, the result is [ undefined, undefined, undefined, undefined ]..

You could get the entries and map new properties.
const
fixed = { pear: 100, apple: 4 },
arr = [{ name: 'P1', pear: 150, apple: 2 }, { name: 'P2', pear: 50, apple: 5 }, { name: 'P3', pear: 450, apple: 1 }, { name: 'P4', pear: 100, apple: 3 }],
dataset = arr.map(d => ({ ...d, ...Object.fromEntries(Object
.entries(fixed)
.map(([k, v]) => [k, v - d[k]])
) }));
console.log(dataset);
.as-console-wrapper { max-height: 100% !important; top: 0; }

If the fixed object has to be a fixed object with same fields, then you can try this
const fixed = { pear: 100, apple: 4 };
const arr = [
{ name: 'P1', pear: 150, apple: 2 },
{ name: 'P2', pear: 50, apple: 5 },
{ name: 'P3', pear: 450, apple: 1 },
{ name: 'P4', pear: 100, apple: 3 }
];
let data = arr.map((item) => {
return { ...item, pear: fixed.pear - item.pear, apple: fixed.apple - item.apple };
});
console.log('checkk', data);

Filter arrow function doesn't give a correct output

const arr = [ { name: 'Dan', age: 33, color: 'red' }, { name: 'Mike', age: 21, color: 'blue' }, { name: 'Lance', age: 20, color: 'green' }, { name: 'Layne', age: 21, color: 'blue' }, { name: 'Dan', age: 18, color: 'red' } ];
const getUsersWithEyeColor = list =>
list.filter((user, colour) => {
return user.eyeColor.includes(colour);
});
log(getUsersWithColor(arr, 'blue'));
I want to filter an array of objects dynamically, using an array function, but right now I am getting an empty array.

You function takes two arguments so it should be: (list, colour) =>... and you need to compare the value so .includes() is not needed:
const arr = [ { name: 'Dan', age: 33, color: 'red' }, { name: 'Mike', age: 21, color: 'blue' }, { name: 'Lance', age: 20, color: 'green' }, { name: 'Layne', age: 21, color: 'blue' }, { name: 'Dan', age: 18, color: 'red' } ];
const getUsersWithColor = (list, colour) =>
list.filter(user => user.color === colour);
console.log(getUsersWithColor(arr, 'blue'));
user represents single element from list

Map array of objects based on Id

Noob javascript enthusiast here.
I'm trying to understand the various higher-order functions of javascript, and am particularly curious with the possibilities of .map() on an array of objects.
Suppose you have the following:
selectedId = ['u1', 'u2']
data = [
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'},
{id: 'u3', color: 'yellow', age: '15'}
]
How would you go about creating a new array that only contains the object of u1 and u2? I.e:
selectedData = [
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'},
]

You would have to Array#map over your selectedId array, then find corresponding object inside data array using Array#find.
const selectedId = ['u1', 'u2'];
const data = [
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'},
{id: 'u3', color: 'yellow', age: '15'}
];
const res = selectedId.map((id) => data.find((o) => o.id === id));
console.log(res);

If I understand it correctly, You can use array filter like
data.filter(el => selectedId.includes(el.id));
would give
[
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'}
]
Or alternatively
selectedId.map((id) => data.find((el) => el.id === id));
would give
[
{id: 'u1', color: 'red', age: '24'},
{id: 'u2', color: 'blue', age: '18'}
]

move key to sub array js [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have an array of objects grouped by Name like this:
[
{
Name: 'Color',
Data:[{Id: 1, Name: 'Red'},
{Id: 2, Name: 'Yellow'},
{Id: 3, Name: 'Blue'},
{Id: 4, Name: 'Green'},
{Id: 7, Name: 'Black'}]
}, {
Name: 'Size',
Data:[{Id: 8, Name: 'S'},
{Id: 11, Name: 'M'},
{Id: 12, Name: 'L'},
{Id: 13, Name: 'XL'},
{Id: 14, Name: 'XXL'}]
}
]
I would like to transform this into a heavy array like this:
[
{Id: 1, Name: 'Red', optionName: 'Color'},
{Id: 2, Name: 'Yellow', optionName: 'Color'},
{Id: 3, Name: 'Blue', optionName: 'Color'},
{Id: 4, Name: 'Green', optionName: 'Color'},
{Id: 7, Name: 'Black', optionName: 'Color'},
{Id: 8, Name: 'S', optionName: 'Size'},
{Id: 11, Name: 'M', optionName: 'Size'},
{Id: 12, Name: 'L', optionName: 'Size'},
{Id: 13, Name: 'XL', optionName: 'Size'},
{Id: 14, Name: 'XXL', optionName: 'Size'}
]
How to do it in javascript/ES6?

You can use .map(), .concat() and Object.assign() methods to get the resultant array:
let data = [
{Name: 'Color', Data:[{Id: 1, Name: 'Red'}, {Id: 2, Name: 'Yellow'}, {Id: 3, Name: 'Blue'}, {Id: 4, Name: 'Green'}, {Id: 7, Name: 'Black'}]},
{Name: 'Size', Data:[{Id: 8, Name: 'S'}, {Id: 11, Name: 'M'}, {Id: 12, Name: 'L'}, {Id: 13, Name: 'XL'}, {Id: 14, Name: 'XXL'}]}
];
let result = [].concat(
...data.map(({Name, Data}) => Data.map(o => Object.assign({}, o, {optionName: Name})))
);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can use array#reduce with array#forEach.
const data = [ { Name: 'Color', Data:[{Id: 1, Name: 'Red'}, {Id: 2, Name: 'Yellow'}, {Id: 3, Name: 'Blue'}, {Id: 4, Name: 'Green'}, {Id: 7, Name: 'Black'}] }, { Name: 'Size', Data:[{Id: 8, Name: 'S'}, {Id: 11, Name: 'M'}, {Id: 12, Name: 'L'}, {Id: 13,Name: 'XL'}, {Id: 14, Name: 'XXL'}] } ],
result = data.reduce((r, {Name: optionName,Data}) => {
Data.forEach(({Id, Name}) => r.push({Id,Name, optionName}));
return r;
}, []);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can also able to do it using forEach. like below.
var s = [{Name:'Color',Data:[{Id:1,Name:'Red'},{Id:2,Name:'Yellow'},{Id:3,Name:'Blue'},{Id:4,Name:'Green'},{Id:7,Name:'Black'}]},{Name:'Size',Data:[{Id:8,Name:'S'},{Id:11,Name:'M'},{Id:12,Name:'L'},{Id:13,Name:'XL'},{Id:14,Name:'XXL'}]}];
var y=[];
s.forEach(x=>x.Data.forEach(z=>{
z['optionName'] = x.Name;
y.push(z);
}));
console.log(y);