Use lodash to categorize an array of objects into distinct groups

Question

Use lodash to categorize an array of objects into distinct groups

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' },
];

The task at hand is to group the array of objects above based on their location property.

The desired outcome consists of an array of objects that include the location and points (an array of objects with the same location).

This grouping operation can be achieved using either lodash or the array reduce method.

javascript arrays lodash

Answer 1

Answer №1

The _.groupBy() method takes a callback function as an argument to determine how to group the elements. One way to create unique keys for grouping is by combining the values of lat and lng using a template string.

const data = [{"location":{"lat":"21.4","lng":"23.5"},"name":"John","id":"1"},{"location":{"lat":"22.4","lng":"25.5"},"name":"Jane","id":"2"},{"location":{"lat":"21.4","lng":"23.5"},"name":"James","id":"3"}];

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

console.log(groupedData);

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

Answer 2

The _.groupBy() method takes a callback function as an argument to determine how to group the elements. One way to create unique keys for grouping is by combining the values of lat and lng using a template string.

const data = [{"location":{"lat":"21.4","lng":"23.5"},"name":"John","id":"1"},{"location":{"lat":"22.4","lng":"25.5"},"name":"Jane","id":"2"},{"location":{"lat":"21.4","lng":"23.5"},"name":"James","id":"3"}];

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

console.log(groupedData);

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

Answer 3

Answer №2

To group the readings by location and then convert the result into an array of objects with location as the key and points list as the value, you can utilize the .reduce method:

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 4

To group the readings by location and then convert the result into an array of objects with location as the key and points list as the value, you can utilize the .reduce method:

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 5

Answer №3

Utilizing Lodash's groupBy function can simplify the process for you. All you need to do is provide a comparison function, like this:

import _ from "lodash";

const dataArr = [
  {
      position: {
          x: '21.4',
          y: '23.5'
      },
      item: 'abc',
      num:'1'
  },
  {
      position: {
          x: '22.4',
          y: '25.5'
      },
      item: 'abc',
      num:'2'
  },
  {
      position: {
          x: '21.4',
          y: '23.5'
      },
      item: 'abc',
      num:'3'
  },
  {
      position: {
          x: '22.4',
          y: '25.5'
      },
      item: 'abc',
      num:'2'
  },
  {
      position: {
          x: '28.4',
          y: '21.5'
      },
      item: 'abc',
      num:'5'
  },
]

const getPos = ({ position }) => `${position.x}/${position.y}`
const groupedObj = _.groupBy(dataArr, getPos)
const groupedArray = Object.values(groupedObj)

Answer 6

Utilizing Lodash's groupBy function can simplify the process for you. All you need to do is provide a comparison function, like this:

import _ from "lodash";

const dataArr = [
  {
      position: {
          x: '21.4',
          y: '23.5'
      },
      item: 'abc',
      num:'1'
  },
  {
      position: {
          x: '22.4',
          y: '25.5'
      },
      item: 'abc',
      num:'2'
  },
  {
      position: {
          x: '21.4',
          y: '23.5'
      },
      item: 'abc',
      num:'3'
  },
  {
      position: {
          x: '22.4',
          y: '25.5'
      },
      item: 'abc',
      num:'2'
  },
  {
      position: {
          x: '28.4',
          y: '21.5'
      },
      item: 'abc',
      num:'5'
  },
]

const getPos = ({ position }) => `${position.x}/${position.y}`
const groupedObj = _.groupBy(dataArr, getPos)
const groupedArray = Object.values(groupedObj)

Answer 7

Answer №4

Utilizing the #array.reduce Method

While other solutions may rely on lodash, you can effortlessly accomplish this task using the .reduce() method.

The crucial aspect here is to generate the key in a specific format.

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

You are free to choose any format you prefer, as long as it's based on the location.lat & location.lng, and the key must be a string, not an 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));

Answer 8

Utilizing the #array.reduce Method

While other solutions may rely on lodash, you can effortlessly accomplish this task using the .reduce() method.

The crucial aspect here is to generate the key in a specific format.

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

You are free to choose any format you prefer, as long as it's based on the location.lat & location.lng, and the key must be a string, not an 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));

Use lodash to categorize an array of objects into distinct groups

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

`You may encounter a error message indicating "ReferenceError: <package> not defined" even after successfully installing the package.`

Loop through JSON data using jQuery for parsing

Encountering an error of "Cannot access property 'PluginKey' of undefined" while utilizing @toast-ui/editor in a JavaScript project

Retrieve the user-inputted data from an Electron BrowserView's input field

What is the recommended approach for embedding scripts within Angular templates?

Challenges integrating Jquery with Flask

Interactive Button Animation using Three.js

The response detail error code 2 indicates that the post method API body check has failed within the Agora REST API, resulting in

Deleting a model using RestAPI and referencing another model

ng-include failing to retrieve file name containing UTF-8 character

Creating bidirectional data binding in JavaScript with the createElement render function for Vue components

Displaying Sweetalert2 textarea inputs in an email

Angular project icons not displaying in the browser

Error Encountered when Making Cross-Origin Ajax Request Using jQuery

Generating a chart using solely the existing data components (values)

Displaying JSON data using Jquery

Retrieve a distinct set of values from one column depending on the values in another column

The Vue.js error message "Unable to access property 'array_name' as it is undefined" indicates an issue with

Revamp the HTML page by automatically refreshing labels upon every Get request

Google Maps API now offers the ability to generate directions with up to 500 waypoints