{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/en/2016-07-15-group-objects-by-nested-property/","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"markdownRemark":{"id":"1f1134f7-b8b0-5ef0-b5f6-66693a4d9af5","html":"

Problem

\n

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

\n

Ingredients

\n\n

Directions

\n
    \n
  1. \n

    Given: an array of objects (e.g., persons) with nested properties (e.g., address.city) …

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

    … and our implementation of the groupBy() function from yesterday’s recipe.

    \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
    3. \n
  3. \n

    Change that function to accept a function (fn) as second parameter instead of a property name …

    \n
    const groupBy = (array, fn) =>              // This line changed.\n  array.reduce((grouped, object) => {\n    ...\n  }, {});
    \n
    4. \n
  4. \n

    … and inside the callback of reduce() determine the value for the group\nby calling this function with the particular object.

    \n
    const groupBy = (array, fn) =>\n  array.reduce((grouped, object) => {\n    let value = fn(object);                 // This line changed.\n    grouped[value] = grouped[value] || [];\n    grouped[value].push(object);\n    return grouped;\n  }, {});
    \n
    5. \n
  5. \n

    Voilá, now you can use the groupBy() function to group objects by a nested property. For example\nto group by the property city of the address property you would simply pass the function\nperson => person.address.city as parameter:

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

Notes

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