{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-07-14-group-objects-by-property/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"bbd0231d-7bf7-5877-b2ff-7ed9ba796dda","html":"

Problem

\n

You have an array of objects and want to group them by a certain property.

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: an array of objects (e.g., persons) …

    \n
    let persons = [\n  {\n    firstName: 'John',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Dave',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Carpenter'\n  }\n]
    \n
    2. \n
  2. \n

    … and you want to group those objects by a property (e.g., by firstName).

    \n
    let groupedByFirstName = groupBy(persons, 'firstName');\nconsole.log(groupedByFirstName);\n// should look like this:\n/*\n{\n  \"John\": [\n    {\n      \"firstName\": \"John\",\n      \"lastName\": \"Doe\"\n    }\n  ],\n  \"Jane\": [\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Doe\"\n    },\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Smith\"\n    },\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Carpenter\"\n    }\n  ],\n  \"Dave\": [\n    {\n      \"firstName\": \"Dave\",\n      \"lastName\": \"Smith\"\n    }\n  ]\n}\n*/
    \n
    3. \n
  3. \n

    Create a function named groupBy() that accepts an array and the name of a property\n(we will use the arrow function style for defining that function).

    \n
    const groupBy = (array, property) => {}
    \n
    4. \n
  4. \n

    Call the reduce() method on the array of objects and pass in an empty object as second parameter ({}).\nThis object will be the result object containing the grouped objects of the array.

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    ...\n  }, {});
    \n
    5. \n
  5. \n

    In the callback function of the reduce() method for every object get the value of the given property.

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    let value = object[property];\n    ...\n  }, {});
    \n
    6. \n
  6. \n

    Initialize the array for that value in the result object (grouped) if it wasn’t initialized yet …

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    let value = object[property];\n    if(!grouped[value]) {\n      grouped[value] = [];\n    }\n    ...\n  }, {});
    \n
    7. \n
  7. \n

    … which can also be written like this:

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    let value = object[property];\n    grouped[value] = grouped[value] || [];\n    ...\n  }, {});
    \n
    8. \n
  8. \n

    Push the current object to that array.

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    let value = object[property];\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    ...\n  }, {});
    \n
    9. \n
  9. \n

    … and return the result object.

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    let value = object[property];\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    return grouped;\n  }, {});
    \n
    10. \n
  10. \n

    Voilá, a tasteful helper function for grouping objects by property.

    \n
    const groupBy = (array, property) =>\n  array.reduce((grouped, object) => {\n    let value = object[property];\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    return grouped;\n  }, {});\nlet persons = [\n  {\n    firstName: 'John',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Doe'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Dave',\n    lastName: 'Smith'\n  },\n  {\n    firstName: 'Jane',\n    lastName: 'Carpenter'\n  }\n]\nlet groupedByFirstName = groupBy(persons, 'firstName');\nconsole.log(groupedByFirstName);\n/* looks like this:\n{\n  \"John\": [\n    {\n      \"firstName\": \"John\",\n      \"lastName\": \"Doe\"\n    }\n  ],\n  \"Jane\": [\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Doe\"\n    },\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Smith\"\n    },\n    {\n      \"firstName\": \"Jane\",\n      \"lastName\": \"Carpenter\"\n    }\n  ],\n  \"Dave\": [\n    {\n      \"firstName\": \"Dave\",\n      \"lastName\": \"Smith\"\n    }\n  ]\n}\n*/
    \n
    11. \n
\n

Notes

\n\n

Alternative recipes

\n","fields":{"slug":"/posts/en/2016-07-14-group-objects-by-property/","tagSlugs":["/tag/java-script/"]},"frontmatter":{"date":"2016-07-14T08:00:00.000Z","description":null,"tags":["JavaScript"],"title":"Group objects by property"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/posts/en/2016-07-14-group-objects-by-property/"}}}