Create a grouped arrays from an array of objects based on property

Question

I have an array of objects (addresses) and I want to /group this array based on the city property and return a new array of arrays. Of course, I don't know how many different cities are in the input array. I took a look at similar questions but couldn't figure out how to do that. I just need a general and dynamic logic. Also, if possible, I want to first see the old vanilla JavaScript solution.

Input

const props = [
  {
      description: 'berlin1',
      address: {
          street: 'address here',
          city: 'berlin'
      }
  },
  {
      description: 'munich1',
      address: {
          street: 'address here',
          city: 'munich'
      }
  },
  {
      description: 'berlin2',
      address: {
          street: 'address here',
          city: 'berlin'
      }
  },
  {
      description: 'munich2',
      address: {
          street: 'address here',
          city: 'munich'
      }
  },
  {
      description: 'berlin3',
      address: {
          street: 'address here',
          city: 'berlin'
      }
  },
  {
      description: 'hamburg1',
      address: {
          street: 'address here',
          city: 'hamburg'
      }
  },
  {
      description: 'berlin4',
      address: {
          street: 'address here',
          city: 'berlin'
      }
  }
]

Output:

const output = [
  [
      {
          description: 'berlin1',
          address: {
              street: 'address here',
              city: 'berlin'
          }
      },
      {
          description: 'berlin2',
          address: {
              street: 'address here',
              city: 'berlin'
          }
      },
      {
          description: 'berlin3',
          address: {
              street: 'address here',
              city: 'berlin'
          }
      },
      {
          description: 'berlin4',
          address: {
              street: 'address here',
              city: 'berlin'
          }
      }
  ],
  [
      {
          description: 'munich1',
          address: {
              street: 'address here',
              city: 'munich'
          }
      },
      {
          description: 'munich2',
          address: {
              street: 'address here',
              city: 'munich'
          }
      }
  ],
  [
      {
          description: 'hamburg1',
          address: {
              street: 'address here',
              city: 'hamburg'
          }
      }
  ]
]

Nenad Vracar · Accepted Answer · 2020-03-23 19:57:08Z

You could do this with Lodash library using groupBy method to group by city and then get values to return an array as aresult.

const props = [ { description: 'berlin1', address: { street: 'address here', city: 'berlin' } }, { description: 'munich1', address: { street: 'address here', city: 'munich' } }, { description: 'berlin2', address: { street: 'address here', city: 'berlin' } }, { description: 'munich2', address: { street: 'address here', city: 'munich' } }, { description: 'berlin3', address: { street: 'address here', city: 'berlin' } }, { description: 'hamburg1', address: { street: 'address here', city: 'hamburg' } }, { description: 'berlin4', address: { street: 'address here', city: 'berlin' } } ]
const result = _.values(_.groupBy(props, 'address.city'))
console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Or you can use reduce method and do this with plain js.

const props = [ { description: 'berlin1', address: { street: 'address here', city: 'berlin' } }, { description: 'munich1', address: { street: 'address here', city: 'munich' } }, { description: 'berlin2', address: { street: 'address here', city: 'berlin' } }, { description: 'munich2', address: { street: 'address here', city: 'munich' } }, { description: 'berlin3', address: { street: 'address here', city: 'berlin' } }, { description: 'hamburg1', address: { street: 'address here', city: 'hamburg' } }, { description: 'berlin4', address: { street: 'address here', city: 'berlin' } } ]

const obj = props.reduce((r, e) => {
  const key = e.address.city;
  if (!r[key]) r[key] = []
  r[key].push(e)
  return r;
}, {})

const result = Object.values(obj)
console.log(result)

xdeepakv · Accepted Answer · 2020-03-28 09:12:30Z

You can use Mapper Util to make it simple. Using array.reduce to push in object than collect.

you can look my gist: https://gist.github.com/deepakshrma/4b6a0a31b4582d6418ec4f76b7439781

const props = [{"description":"berlin1","address":{"street":"address here","city":"berlin"}},{"description":"munich1","address":{"street":"address here","city":"munich"}},{"description":"berlin2","address":{"street":"address here","city":"berlin"}},{"description":"munich2","address":{"street":"address here","city":"munich"}},{"description":"berlin3","address":{"street":"address here","city":"berlin"}},{"description":"hamburg1","address":{"street":"address here","city":"hamburg"}},{"description":"berlin4","address":{"street":"address here","city":"berlin"}}]
class Mapper {
  constructor(array, fn = x => x) {
    this.map = array.reduce((map, item) => {
      const val = fn(item);
      if (!map[val]) {
        map[val] = [];
      }
      map[val].push(item);
      return map;
    }, {});
  }

  find(key) {
    return this.map[key] && this.map[key][Mapper.FIRST_INDEX]; //return blank array
  }

  findAll(key, returnUndefined) {
    //return blank array
    return this.map[key] ? this.map[key] : returnUndefined ? undefined : [];
  }
}
Mapper.FIRST_INDEX = 0;
const mapper = new Mapper(props, i => i.address.city);
console.log(mapper.map);
const cities = [];
for (let key in mapper.map) {
  cities.push(mapper.map[key]);
}
console.log(cities);

Oliver · Accepted Answer · 2020-03-28 09:21:25Z

If you want an old fashioned way

var props = [ { description: 'berlin1', address: { street: 'address here', city: 'berlin' } }, { description: 'munich1', address: { street: 'address here', city: 'munich' } }, { description: 'berlin2', address: { street: 'address here', city: 'berlin' } }, { description: 'munich2', address: { street: 'address here', city: 'munich' } }, { description: 'berlin3', address: { street: 'address here', city: 'berlin' } }, { description: 'hamburg1', address: { street: 'address here', city: 'hamburg' } }, { description: 'berlin4', address: { street: 'address here', city: 'berlin' } } ]

function groupByCity(arr) {
  var groups = {};

  for (var i = 0; i < arr.length; i++) {
    var item = arr[i];
    var city  = item.address.city;

    if (groups[city] === undefined) {
      groups[city] = [];
    }

    groups[city].push(item);
  }

  var result = [];
  var groupKeys = Object.keys(groups);

  for (var i = 0; i < groupKeys.length; i++) {
    var groupKey = groupKeys[i];
    var group = groups[groupKey];

    result.push(group);
  }

  return result;
}

console.log(groupByCity(props));

Collectives™ on Stack Overflow

Create a grouped arrays from an array of objects based on property

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related