Lodash groupBy() Method should be in same order as original array

Question

I'm working on an array using groupBy lodash method, here the original array order does not exist on performing groupBy, is the any way to regain it after groupBy()

  const groupBy from "groupBy/lodash";

const mockData = [
 { groupId:"44", groupName:"mno",   },
 { groupId:"45", groupName:"pqr"  },
 { groupId:"40", groupName:"abc"  },
 { groupId:"41", groupName:"def"  },
]
const filteredArray = mockData.filter(item =>....); //logic to filter based on few parameters
const newArray = groupBy(filteredArray, "groupId");
console.log(newArray);

 result - {
 40: [{ groupId:"40", groupName:"abc"  }],
 41: [{ groupId:"41", groupName:"def"  }],
 44: [{ groupId:"44", groupName:"mno"  }],
 45: [{ groupId:"45", groupName:"pqr"  }],
}

expected - {
    44: [{ groupId:"44", groupName:"mno",   }],
    45: [{ groupId:"45", groupName:"pqr"  }],
    40: [{ groupId:"40", groupName:"abc"  }],
    41 [{ groupId:"41", groupName:"def"  }],
    }

yes it should be same order as array order, irrespective of object or array type — Abhishek Konnur, May 17 '22 at 05:16
something like this https://stackoverflow.com/questions/28860526/lodash-sortby-then-groupby-is-order-maintained — Abhishek Konnur, May 17 '22 at 05:22

score 0 · Answer 1 · answered May 17 '22 at 05:16

0

My guess, the groupBy method is sorting/grouping the array using groupId.

Can you clarify this question, are you saying the mockData order is diff and newArray order is diff. If so, then it is groupedBy groupId otherwise its mutating the array.

answered May 17 '22 at 05:16

Gokulakrishnan Kalaikovan

35
1
12

groupBy() will perform both grouping and sorting, then is there any way I can regain the original order on the result of groupBy method, – Abhishek Konnur May 17 '22 at 05:18

score 0 · Answer 2 · answered May 17 '22 at 07:20

The _.groupBy() function creates an object. You are grouping by the id, and the ids are integers in a string form. ES6 traversal order rules order the integer properties by their value (ascending) - see this article. In your case, the groups are sorted by the id integer value.

Since _.groupBy() doesn't actually sort the keys, nor can you sort object's integer keys explicitly, you'll need to use another structure that preserves the order - a Map.

const groupByToMap = (arr, predicate) =>
  arr.reduce((acc, o) => {
    const key = predicate(o)
    
    if(!acc.has(key)) acc.set(key, [])
  
    acc.get(key).push(o)
  
    return acc
  }, new Map())

const mockData = [{ groupId:"44", groupName:"mno" }, { groupId:"45", groupName:"pqr"  },  { groupId:"40", groupName:"abc"  }, { groupId:"41", groupName:"def"  }]

const result = groupByToMap(mockData, o => o.groupId)

// !!! look at the browser's console (the snippet's would display an empty object) !!!
console.log(result) 

// when converting to an object the keys would be reordered by their integer value
console.log(Object.fromEntries(result))

I know. I explain and demonstrate why it can't be done in an object. However, it can be done with a Map. Read my answer and review the code. Open the *browser's* console to see the order of the Map. — Ori Drori, May 17 '22 at 08:21

Lodash groupBy() Method should be in same order as original array

2 Answers2

Linked