Instead of returning an object, the underscore groupBy function now returns an array

Question

Instead of returning an object, the underscore groupBy function now returns an array

Currently, I am attempting to utilize underscore to create an array of entities that are grouped by their respective locations.

The current format of the array consists of pairs in this structure { location: Location, data: T}[]. However, I aim to rearrange it so that it is grouped by location and appears like this

{ location: Location, data: T[]}>[]

Initially, my approach involved using _.GroupBy

const entitiesMap = entities.map(e => ({ location: this.options.locationResolver(e), data: e}));
this.locationEntitiesMap = _.groupBy(entitiesMap, entityPair => entityPair.location);

However, upon implementation, I noticed that this method returns an object with the location as the Key. How can I modify this to return a grouped array instead?

javascript angular typescript underscore.js

Answer 1

Answer №1

One efficient way to handle this task is by utilizing a reduce function.

const places = [
  { location: {id: 'USA'},  data:{ eventName:'tech week' }},
  { location: {id: 'GER'},  data:{ eventName:'cheese wheeling' }},
  { location: {id: 'USA'},  data:{ eventName:'mecha fights' }},
  { location: {id: 'AUS'},  data:{ eventName:'kangaroo fight' }}
];

const group = (array, prop) => array.reduce((g, item) => {
    const propVal = item[prop];
    const identifier = propVal.id;
    const entry = g[identifier];
    const data = item.data;

    if (entry) {
      entry.data.push(data);
    } else {
      g[identifier] = {location: propVal, data: [data]};
    }
    return g;
  }, {});

const groups = group(places, 'location');
console.log(group(Object.keys(groups).map((key) => groups[key]), 'location'));

Answer 2

One efficient way to handle this task is by utilizing a reduce function.

const places = [
  { location: {id: 'USA'},  data:{ eventName:'tech week' }},
  { location: {id: 'GER'},  data:{ eventName:'cheese wheeling' }},
  { location: {id: 'USA'},  data:{ eventName:'mecha fights' }},
  { location: {id: 'AUS'},  data:{ eventName:'kangaroo fight' }}
];

const group = (array, prop) => array.reduce((g, item) => {
    const propVal = item[prop];
    const identifier = propVal.id;
    const entry = g[identifier];
    const data = item.data;

    if (entry) {
      entry.data.push(data);
    } else {
      g[identifier] = {location: propVal, data: [data]};
    }
    return g;
  }, {});

const groups = group(places, 'location');
console.log(group(Object.keys(groups).map((key) => groups[key]), 'location'));

Instead of returning an object, the underscore groupBy function now returns an array

Answer №1

Similar questions

Encountering difficulties with the functionality of Google Places API

Validate object containing both static and dynamic keys

Tips for moving a polygon while dragging a marker within its boundaries

NodeJS: Error - Unexpected field encountered in Multer

Verify and deselect boxes

The functionality of res.send is not working correctly

Unexpected syntax error occurs while retrieving data from web API using jQuery AJAX request

Preventing Prepend Scroll: Tips and Tricks

Breaking down an array in Node.js

How to pass a method from a child component to a parent component in Vue.js

Comparison between modules and standalone components

The ng-bind directive is functional when used with a textarea element, but it does not work with

The fadeOut() function is not functioning properly as the div keeps reappearing even after attempting to

Access the child component within an @ChildComponent directive in Angular

Dealing with issues escaping unicode characters in JavaScript

Utilize a Vue.js filter on the v-model within an input element

Tips for effectively passing a $scope object between various controllers

Create a d.ts file for Vue components that are written using Typescript

Utilizing the functionalities provided by node.js, I came across an issue and sought out a solution for the error message "TypeError: __WEBPACK_IMPORTED_MODULE_3_fs__.writeFile is not a function"

trigger a p:ajax event by employing a right-click action