If I have array of objects like this one I want to group it by property value
const unitsPhotos = [{
fieldname: 'unit_1',
name: 'Photo 1',
size: 324
},
{
fieldname: 'unit_2',
name: 'Photo 11',
size: 321
},
{
fieldname: 'unit_1',
name: 'Photo 41',
size: 541
},
{
fieldname: 'unit_2',
name: 'Photo 14',
size: 123
},
{
fieldname: 'unit_3',
name: 'Photo 144',
size: 1223
}
];
How to create three new separate arrays of objects based on fieldname ( or single array that contains those arrays of objects ) something like this
const groupedArray = [
[{
fieldname: 'unit_1',
name: 'Photo 1',
size: 324
},
{
fieldname: 'unit_1',
name: 'Photo 132',
size: 325
}],
[{
fieldname: 'unit_2',
name: 'Photo 11',
size: 321
},
{
fieldname: 'unit_2',
name: 'Photo 14',
size: 123
}],
[{
fieldname: 'unit_3',
name: 'Photo 144',
size: 1223
}]];
you can first unique the array and next push them to groupedArray like this:
const unitsPhotos = [{
fieldname: 'unit_1',
name: 'Photo 1',
size: 324
},
{
fieldname: 'unit_2',
name: 'Photo 11',
size: 321
},
{
fieldname: 'unit_1',
name: 'Photo 41',
size: 541
},
{
fieldname: 'unit_2',
name: 'Photo 14',
size: 123
},
{
fieldname: 'unit_3',
name: 'Photo 144',
size: 1223
}
];
const unitsPhotosArr = unitsPhotos.map(item => item.fieldname)
// you can find uniques with this function
const toFindUniques = arry => arry.filter((item, index) => arry.indexOf(item) === index)
const uniques = toFindUniques(unitsPhotosArr);
const groupedArray = [];
for (const element of uniques) {
const item = unitsPhotos.filter(el => el.fieldname === element);
groupedArray.push(item)
}There are many different approaches to go with this although I would advise using Array.prototype.reduce to avoid having to iterate over the list many times when it is unnecessary. To do this, I created an object then pushed each item into a key of the field name and create the array if it is not present. Here's the code:
const unitsPhotos = [{
fieldname: 'unit_1',
name: 'Photo 1',
size: 324
},
{
fieldname: 'unit_2',
name: 'Photo 11',
size: 321
},
{
fieldname: 'unit_1',
name: 'Photo 41',
size: 541
},
{
fieldname: 'unit_2',
name: 'Photo 14',
size: 123
},
{
fieldname: 'unit_3',
name: 'Photo 144',
size: 1223
}
];
function groupPhotos(photos) {
return Object.values(photos.reduce((acc, cur) => {
acc[cur.fieldname] ??= [];
acc[cur.fieldname].push(cur);
return acc;
}, {}));
}
console.log(groupPhotos(unitsPhotos));
Use Array#reduce() to produce an object:
const unitsPhotos = [{fieldname: 'unit_1', name: 'Photo 1', size: 324 }, { fieldname: 'unit_2',
name: 'Photo 11', size: 321 }, { fieldname: 'unit_1', name: 'Photo 41', size: 541 }, { fieldname: 'unit_2', name: 'Photo 14', size: 123 }, { fieldname: 'unit_3', name: 'Photo 144', size: 1223 }];
const groupedArray = unitsPhotos.reduce((prev, cur) =>
({...prev,[cur.fieldname]:(prev[cur.fieldname] || []).concat(cur)}),{}
);
console.log( groupedArray );
//You can leave it as an object OR
//if it has to be an array use Object.values()
//Like so: Output is same as your desired output.
console.log( Object.values(groupedArray) );
/*OUTPUT:
[
[
{
"fieldname": "unit_1",
"name": "Photo 1",
"size": 324
},
{
"fieldname": "unit_1",
"name": "Photo 41",
"size": 541
}
],
[
{
"fieldname": "unit_2",
"name": "Photo 11",
"size": 321
},
{
"fieldname": "unit_2",
"name": "Photo 14",
"size": 123
}
],
[
{
"fieldname": "unit_3",
"name": "Photo 144",
"size": 1223
}
]
]
*/