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

Answer 1

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>

Answer 2

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>

Answer 3

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)

Answer 4

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));