Group array of objects using lodash

Question

const readings = [
  { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'1' },
  { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
  {  location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'3' },
  { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
  { location: { lat: '28.4', lng: '21.5' }, vehicle: 'sdkhf', id:'5' },
];

I want to group the below array of objects by location property.

The expected result is an array of objects with location and points(array of objects which have the same location).

Group array of objects using lodash or array reduce method

Does this answer your question? How to group an array of objects by key — pilchard
– pilchard, Commented Jan 30, 2021 at 11:50

Ori Drori · Accepted Answer · 2021-01-30 14:49:55Z

The _.groupBy() function accepts a callback that defines the key to group by. You can concatenate the lat and lng using a template string, and use that as the key.

const readings = [{"location":{"lat":"21.4","lng":"23.5"},"vehicle":"sdkhf","id":"1"},{"location":{"lat":"22.4","lng":"25.5"},"vehicle":"sdkhf","id":"2"},{"location":{"lat":"21.4","lng":"23.5"},"vehicle":"sdkhf","id":"3"},{"location":{"lat":"22.4","lng":"25.5"},"vehicle":"sdkhf","id":"2"},{"location":{"lat":"28.4","lng":"21.5"},"vehicle":"sdkhf","id":"5"}];

const result = _.groupBy(readings, ({ location: { lat, lng} }) => `${lat}-${lng}`);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

Majed Badawi · Accepted Answer · 2021-01-30 11:26:39Z

You can use .reduce to group readings by location and then transform the resulting map to an array of objects having location as key and points list as value:

const readings = [
  { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'1' },
  { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
  {  location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'3' },
  { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
  { location: { lat: '28.4', lng: '21.5' }, vehicle: 'sdkhf', id:'5' },
];

//group by location
let res = _.reduce(readings, (acc,item) => {
  const { location: { lat, lng } } = item;
  const key = `${lat}-${lng}`;
  const prev = acc[key];
  if(!prev) acc[key] = [item];
  else acc[key].push(item);
  return acc;
}, {});
//transform to array of objects location-points
res = _.map(_.entries(res), ([location,points]) => ({ [location]: points }));

console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

marcos · Accepted Answer · 2021-01-30 11:34:25Z

Lodash groupBy will make it easier for u, just pass a comparison function, for example:

import _ from "lodash";

const readings= [
  {
      location: {
          lat: '21.4',
          lng: '23.5'
      },
      vehicle: 'sdkhf',
      id:'1'
  },
  {
      location: {
          lat: '22.4',
          lng: '25.5'
      },
      vehicle: 'sdkhf',
      id:'2'
  },
  {
      location: {
          lat: '21.4',
          lng: '23.5'
      },
      vehicle: 'sdkhf',
      id:'3'
  },
  {
      location: {
          lat: '22.4',
          lng: '25.5'
      },
      vehicle: 'sdkhf',
      id:'2'
  },
  {
      location: {
          lat: '28.4',
          lng: '21.5'
      },
      vehicle: 'sdkhf',
      id:'5'
  },
]

const getLocation = ({ location }) => `${location.lat}/${location.lng}`
const objGrouped = _.groupBy(readings, getLocation)
const arrayGrouped = Object.values(objGrouped)

Nguyễn Văn Phong · Accepted Answer · 2021-02-01 03:21:00Z

0

Using #array.reduce method

Although other answers look good with lodash, you can easily achieve it by using .reduce().

The key point here is getting key with the format.

const key = `lat.${curr.location.lat}-lng.${curr.location.lng}`

Or any format as you like. As long as it based on location.lat & location.lng along with the key should be a string instead of object.

const readings = [
  { location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'1' },
  { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
  {  location: { lat: '21.4', lng: '23.5' }, vehicle: 'sdkhf', id:'3' },
  { location: { lat: '22.4', lng: '25.5' }, vehicle: 'sdkhf', id:'2' },
  { location: { lat: '28.4', lng: '21.5' }, vehicle: 'sdkhf', id:'5' },
];

var result = readings.reduce((acc, curr) => {
    const key = `lat.${curr.location.lat}-lng.${curr.location.lng}`
    acc[key] ??= {[key]: []};
    acc[key][key].push(curr);

    return acc;
  }, {})

console.log(Object.values(result));

edited Feb 1, 2021 at 3:21

answered Jan 30, 2021 at 11:39

Nguyễn Văn Phong

14.2k19 gold badges47 silver badges65 bronze badges

1 Comment

Nguyễn Văn Phong Over a year ago

@Naveen Does this answer your question? Let me know if you need any help ^^!

Collectives™ on Stack Overflow

Group array of objects using lodash

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related