CODEWITHSUNDEEP
javascriptarrayslodash
Naveen
Naveen

Reputation: 165

Group array of objects using 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' },
];

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

Upvotes: 1

Views: 2616

Answers (4)

Nguyễn Văn Phong
Nguyễn Văn Phong

Reputation: 14228

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

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 193358

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>

Upvotes: 1

marcos
marcos

Reputation: 4510

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)

Upvotes: 0

Majed Badawi
Majed Badawi

Reputation: 28434

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>

Upvotes: 0

Related Questions