Saturday, May 18, 2024
HomeProgrammingJavaScript Array Group

JavaScript Array Group


Managing, sorting, and manipulating information with JavaScript is a ability we have typically delegated to 3rd get together libraries like lodash. Because the JavaScript language progresses, nonetheless, these options ultimately get. added to the JavaScript specification. Two such APIs for grouping of Array information are `Array.prototype.group and Array.prototype.groupToMap.

Array.prototype.group

To group an array of objects by a given property, name the group technique with perform that returns the grouping string:

const groups = [
  { name: "Arsenal", origin: "London", tier: "legendary" },
  { name: "Manchester United", origin: "Manchester", tier: "legendary" },
  { name: "Liverpool", origin: "Liverpool", tier: "legendary" },
  { name: "Newcastle United", origin: "Newcastle", tier: "mid" },
  // Lol, awful club
  { name: "Tottenham", origin: "London", tier: "lol" },
];

const tieredTeams = groups.group(({ tier }) => tier);

The results of the array’s group is an object with keys that match the grouping key:

{
  legendary: [
    {name: "Arsenal", origin: "London", tier: "legendary"},
    {name: "Manchester United", origin: "Manchester", tier: "legendary"},
    {name: "Liverpool", origin: "Liverpool", tier: "legendary"}
  ], 
  mid: [
    {name: "Newcastle United", origin: "Newcastle", tier: "mid"}
  ], 
  lol: [
    {name: "Tottenham", origin: "London", tier: "lol"}
  ]
}

Array.prototype.groupToMap

groupToMap returns a Map occasion as a substitute of an object literal:

const tieredTeamsMap = groups.group(({ tier }) => tier);

tieredTeamsMap.has('lol') // true

tieredTeamsMap.get('lol') // [{name: "Tottenham", origin: "London", tier: "lol"}]

As of the time of publish, group and groupToMap are solely obtainable in Safari. These two strategies are essential to information administration transferring ahead. Whether or not you are manipulating information on consumer or server facet, these newly added native strategies are a lot welcomed.


RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments