Grouping array elements by a property
JavaScriptAll snippets in this category →
Posted on If objects in an array are categorized by a property, we can group them by that property like this. We can then quickly get all objects with a certain value instead of having to filter all the time.
// takes an array of objects and the name of a property of these objects
const groupBy = (array, property) => array.reduce((grouped, element) => ({
...grouped,
[element[property]]: [...(grouped[element[property]] || []), element]
}), {})
// some elements in this array share the same value for their `type`
const team = [
{ name: "Squirtle", type: "Water" },
{ name: "Pikachu", type: "Electric" },
{ name: "Arcanine", type: "Fire" },
{ name: "Psyduck", type: "Water" },
{ name: "Vulpix", type: "Fire" },
]
// `groupBy` groups an array into a dictionary based on the given property
const groupedByType = groupBy(team, "type")
// ⇒ {
// "Water": [
// { name: "Squirtle", type: "Water" },
// { name: "Psyduck", type: "Water" },
// ],
// "Electric": [
// { name: "Pikachu", type: "Electric" },
// ],
// "Fire": [
// { name: "Arcanine", type: "Fire" },
// { name: "Vulpix", type: "Fire" },
// ]
// }
// we can get a list of all values from the dictionary’s keys
Object.keys(groupedByType)
// ⇒ ["Water", "Electric", "Fire"]
// we can then extract only the elements that share the same type
groupedByType["Fire"]
// ⇒ [
// { name: "Arcanine", type: "Fire" },
// { name: "Vulpix", type: "Fire" },
// ]// takes an array of objects and the name of a property of these objects
const groupBy = (array, property) => array.reduce((grouped, element) => ({
...grouped,
[element[property]]: [...(grouped[element[property]] || []), element]
}), {})
// some elements in this array share the same value for their `type`
const team = [
{ name: "Squirtle", type: "Water" },
{ name: "Pikachu", type: "Electric" },
{ name: "Arcanine", type: "Fire" },
{ name: "Psyduck", type: "Water" },
{ name: "Vulpix", type: "Fire" },
]
// `groupBy` groups an array into a dictionary based on the given property
const groupedByType = groupBy(team, "type")
// ⇒ {
// "Water": [
// { name: "Squirtle", type: "Water" },
// { name: "Psyduck", type: "Water" },
// ],
// "Electric": [
// { name: "Pikachu", type: "Electric" },
// ],
// "Fire": [
// { name: "Arcanine", type: "Fire" },
// { name: "Vulpix", type: "Fire" },
// ]
// }
// we can get a list of all values from the dictionary’s keys
Object.keys(groupedByType)
// ⇒ ["Water", "Electric", "Fire"]
// we can then extract only the elements that share the same type
groupedByType["Fire"]
// ⇒ [
// { name: "Arcanine", type: "Fire" },
// { name: "Vulpix", type: "Fire" },
// ]// takes an array of objects and the name of a property of these objects
const groupBy = (array, property) => array.reduce((grouped, element) => ({
...grouped,
[element[property]]: [...(grouped[element[property]] || []), element]
}), {})
// some elements in this array share the same value for their `type`
const team = [
{ name: "Squirtle", type: "Water" },
{ name: "Pikachu", type: "Electric" },
{ name: "Arcanine", type: "Fire" },
{ name: "Psyduck", type: "Water" },
{ name: "Vulpix", type: "Fire" },
]
// `groupBy` groups an array into a dictionary based on the given property
const groupedByType = groupBy(team, "type")
// ⇒ {
// "Water": [
// { name: "Squirtle", type: "Water" },
// { name: "Psyduck", type: "Water" },
// ],
// "Electric": [
// { name: "Pikachu", type: "Electric" },
// ],
// "Fire": [
// { name: "Arcanine", type: "Fire" },
// { name: "Vulpix", type: "Fire" },
// ]
// }
// we can get a list of all values from the dictionary’s keys
Object.keys(groupedByType)
// ⇒ ["Water", "Electric", "Fire"]
// we can then extract only the elements that share the same type
groupedByType["Fire"]
// ⇒ [
// { name: "Arcanine", type: "Fire" },
// { name: "Vulpix", type: "Fire" },
// ]// takes an array of objects and the name of a property of these objects
const groupBy = (array, property) => array.reduce((grouped, element) => ({
...grouped,
[element[property]]: [...(grouped[element[property]] || []), element]
}), {})
// some elements in this array share the same value for their `type`
const team = [
{ name: "Squirtle", type: "Water" },
{ name: "Pikachu", type: "Electric" },
{ name: "Arcanine", type: "Fire" },
{ name: "Psyduck", type: "Water" },
{ name: "Vulpix", type: "Fire" },
]
// `groupBy` groups an array into a dictionary based on the given property
const groupedByType = groupBy(team, "type")
// ⇒ {
// "Water": [
// { name: "Squirtle", type: "Water" },
// { name: "Psyduck", type: "Water" },
// ],
// "Electric": [
// { name: "Pikachu", type: "Electric" },
// ],
// "Fire": [
// { name: "Arcanine", type: "Fire" },
// { name: "Vulpix", type: "Fire" },
// ]
// }
// we can get a list of all values from the dictionary’s keys
Object.keys(groupedByType)
// ⇒ ["Water", "Electric", "Fire"]
// we can then extract only the elements that share the same type
groupedByType["Fire"]
// ⇒ [
// { name: "Arcanine", type: "Fire" },
// { name: "Vulpix", type: "Fire" },
// ]