Group array items using object

Question

My array is something like this  myArray        group   quot one quot   color   quot red quot       group   quot two quot   color   quot blue quot       group   quot one quot   color   quot green quot       group   quot one quot   color   quot black quot      I want to convert this into  myArray        group   quot one quot   color    quot red quot    quot green quot    quot black quot       group   quot two quot   color    quot blue quot       So  basically  group by group  I m trying  for  i in myArray     var group   myArray i  group      myArray push group            I just don t know how to handle the grouping of similar group values

User · Answer

I like to use the Map constructor callback for creating the groups  map keys   The second step is to populate the values of that map  and finally to extract the map s data in the desired output format   x000D   x000D  let myArray     group   one   color   red    group   two   color   blue                    group   one   color   green    group   one   color   black      let map   new Map myArray map   group     gt   group    group  color           for  let  group  color  of myArray  map get group  color push color   let result       map values      console log result      x000D   x000D   x000D

User · Answer

This version takes advantage that object keys are unique. We process the original array and collect the colors by group in a new object. Then create new objects from that group -> color array map.

var myArray = [{
      group: "one",
      color: "red"
    }, {
      group: "two",
      color: "blue"
    }, {
      group: "one",
      color: "green"
    }, {
      group: "one",
      color: "black"
    }];

    //new object with keys as group and
    //color array as value
    var newArray = {};

    //iterate through each element of array
    myArray.forEach(function(val) {
      var curr = newArray[val.group]

      //if array key doesnt exist, init with empty array
      if (!curr) {
        newArray[val.group] = [];
      }

      //append color to this key
      newArray[val.group].push(val.color);
    });

    //remove elements from previous array
    myArray.length = 0;

    //replace elements with new objects made of
    //key value pairs from our created object
    for (var key in newArray) {
      myArray.push({
        'group': key,
        'color': newArray[key]
      });
    }

Please note that this does not take into account duplicate colors of the same group, so it is possible to have multiple of the same color in the array for a single group.

User · Answer

x000D   x000D  myArray     x000D     group   one   color   red    x000D     group   two   color   blue    x000D     group   one   color   green    x000D     group   one   color   black   x000D     x000D   x000D   x000D  let group   myArray map  item   gt   item group   filter  item  i  ar    gt  ar indexOf item      i  sort  a  b   gt  a - b  map item  gt   x000D      let new list   myArray filter itm   gt  itm group    item  map itm  gt itm color   x000D      return  group item color new list  x000D      x000D  console log group   x000D   x000D   x000D

User · Answer

this repo offers solutions in lodash and alternatives in native Js  you can find how to implement groupby  https   github com you-dont-need You-Dont-Need-Lodash-Underscore  groupby

User · Answer

var array            id   123         name   aaaaaaaa                 id   123         name   aaaaaaaa                 id   456         name   bbbbbbbbbb                 id   789         name   ccccccccc                 id   789         name   ccccccccc                 id   098         name   dddddddddddd            if you want to group this array group array  key      console log array     let finalArray         array forEach function element        var newArray           array forEach function element1          if  element key     element1 key               newArray push element                      if    finalArray some arrVal   gt  newArray 0  key     arrVal 0  key               finalArray push newArray                 return finalArray     and call this function groupArray arr  key      console log this group arr  key

User · Answer

Using Array s reduce and findIndex methods  this can be achieved     x000D   x000D  var myArray      x000D    group   one   x000D    color   red  x000D       x000D    group   two   x000D    color   blue  x000D       x000D    group   one   x000D    color   green  x000D       x000D    group   one   x000D    color   black  x000D      x000D   x000D  var transformedArray   myArray reduce  acc  arr    gt    x000D    var index   acc findIndex function element    x000D      return element group     arr group  x000D        x000D    if  index     -1    x000D      return acc push   x000D        group  arr group  x000D        color   arr color  x000D          x000D      x000D     x000D    acc index  color push arr color   x000D    return acc  x000D          x000D   x000D  console log transformedArray   x000D   x000D   x000D    By using reduce function  array is iterator and the new values are stored in acc  accumulating  parameter  To check if the object with given group already exists we can use findIndex function   If findIndex   return -1  the value does not exist  so add the array in the acc parameter   If findIndex   return index  then update the index with the arr values

User · Answer

Using ES6  this can be done quite nicely using  reduce   with a Map as the accumulator  and then using Array from   with its mapping function to map each grouped map-entry to an object   x000D   x000D  const arr      group   one   color   red     group   two   color   blue     group   one   color   green     group   one   color   black      const res   Array from arr reduce  m   group  color     gt       m set group       m get group          color    new Map        group  color     gt    group  color       console log res   x000D   x000D   x000D   If you have additional properties in your objects other than just group and color  you can take a more general approach by setting a grouped object as the map s values like so   x000D   x000D  const arr      group   one   color   red     group   two   color   blue     group   one   color   green     group   one   color   black      const groupAndMerge    arr  groupBy  mergeInto    gt     Array from arr reduce  m  o    gt        const curr   m get o groupBy        return m set o groupBy       o   mergeInto        curr  amp  amp  curr mergeInto          o mergeInto           new Map  values      console log groupAndMerge arr   group    color     x000D   x000D   x000D   If you can support optional chaining and the nullish coalescing operator       you can simplify the above method to the following   x000D   x000D  const arr      group   one   color   red     group   two   color   blue     group   one   color   green     group   one   color   black     const groupAndMerge    arr  groupBy  mergeWith    gt    Array from arr reduce  m  o    gt  m set o groupBy       o   mergeWith        m get o groupBy     mergeWith          o mergeWith      new Map  values      console log groupAndMerge arr   group    color     x000D   x000D   x000D

User · Answer

Try  h      myArray forEach x  gt  h x group    h x group       concat x color     myArray   Object keys h  map k  gt    group k  color h k        x000D   x000D  let myArray     x000D     group   one   color   red    x000D     group   two   color   blue    x000D     group   one   color   green    x000D     group   one   color   black    x000D     x000D   x000D  let h     x000D   x000D  myArray forEach x  gt  h x group    h x group       concat x color     x000D  myArray   Object keys h  map k  gt    group k  color h k     x000D   x000D  console log myArray   x000D   x000D   x000D

User · Answer

Use lodash s groupby method     Creates an object composed of keys generated from the results of running each element of collection thru iteratee  The order of grouped values is determined by the order they occur in collection  The corresponding value of each key is an array of elements responsible for generating the key  The iteratee is invoked with one argument   value     So with lodash you can get what you want in a single line  See below   x000D   x000D  let myArray     x000D     group   one   color   red    x000D     group   two   color   blue    x000D     group   one   color   green    x000D     group   one   color   black    x000D    x000D  let grouppedArray   groupBy myArray  group   x000D  console log grouppedArray  x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 4 lodash min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

One option is   var res   myArray reduce function groups  currentValue        if   groups indexOf currentValue group      -1           groups push currentValue group             return groups         map function group        return           group  group          color  myArray filter function  el              return  el group     group             map function  el    return  el color                 http   jsfiddle net dvgwodxq

User · Answer

Beside the given approaches with a two pass approach, you could take a single loop approach by pushing the group if a new group is found.

_x000D_

var array = [{ group: "one", color: "red" }, { group: "two", color: "blue" }, { group: "one", color: "green" }, { group: "one", color: "black" }],_x000D_
    groups = Object.create(null),_x000D_
    grouped = [];_x000D_
_x000D_
array.forEach(function (o) {_x000D_
    if (!groups[o.group]) {_x000D_
        groups[o.group] = [];_x000D_
        grouped.push({ group: o.group, color: groups[o.group] });_x000D_
    }_x000D_
    groups[o.group].push(o.color);_x000D_
});_x000D_
_x000D_
console.log(grouped);

_x000D_

.as-console-wrapper { max-height: 100% !important; top: 0; }

_x000D_

User · Answer

First  in JavaScript it s generally not a good idea to iterate over arrays using for     in  See Why is using  quot for   in quot  with array iteration a bad idea  for details   So you might try something like this   var groups       for  var i   0  i  lt  myArray length  i        var groupName   myArray i  group    if   groups groupName         groups groupName              groups groupName  push myArray i  color     myArray       for  var groupName in groups      myArray push  group  groupName  color  groups groupName         Using the intermediary groups object here helps speed things up because it allows you to avoid nesting loops to search through the arrays  Also  because groups is an object  rather than an array  iterating over it using for     in is appropriate   Addendum  FWIW  if you want to avoid duplicate color entries in the resulting arrays you could add an if statement above the line groups groupName  push myArray i  color   to guard against duplicates  Using jQuery it would look like this   if     inArray myArray i  color  groups groupName        groups groupName  push myArray i  color       Without jQuery you may want to add a function that does the same thing as jQuery s inArray   Array prototype contains   function value      for  var i   0  i  lt  this length  i          if  this i      value        return true        return false      and then use it like this   if   groups groupName  contains myArray i  color       groups groupName  push myArray i  color       Note that in either case you are going to slow things down a bit due to all the extra iteration  so if you don t need to avoid duplicate color entries in the result arrays I would recommend avoiding this extra code  There

User · Answer

Start by creating a mapping of group names to values. Then transform into your desired format.

_x000D_

var myArray = [_x000D_
    {group: "one", color: "red"},_x000D_
    {group: "two", color: "blue"},_x000D_
    {group: "one", color: "green"},_x000D_
    {group: "one", color: "black"}_x000D_
];_x000D_
_x000D_
var group_to_values = myArray.reduce(function (obj, item) {_x000D_
    obj[item.group] = obj[item.group] || [];_x000D_
    obj[item.group].push(item.color);_x000D_
    return obj;_x000D_
}, {});_x000D_
_x000D_
var groups = Object.keys(group_to_values).map(function (key) {_x000D_
    return {group: key, color: group_to_values[key]};_x000D_
});_x000D_
_x000D_
var pre = document.createElement("pre");_x000D_
pre.innerHTML = "groups:\n\n" + JSON.stringify(groups, null, 4);_x000D_
document.body.appendChild(pre);

_x000D_

Using Array instance methods such as reduce and map gives you powerful higher-level constructs that can save you a lot of the pain of looping manually.

User · Answer

You can do something like this   function convert items        var result            items forEach function  element            var existingElement   result filter function  item                return item group     element group             0            if  existingElement                existingElement color push element color             else               element color    element color               result push element                           return result

User · Answer

This gives you unique colors  if you do not want duplicate values for color   x000D   x000D  var arr     x000D     group   one   color   red    x000D     group   two   color   blue    x000D     group   one   color   red    x000D     group   two   color   blue    x000D     group   one   color   green    x000D     group   one   color   black   x000D    x000D   x000D  var arra       new Set arr map x   gt  x group    x000D   x000D  let reformattedArray   arra map obj   gt    x000D     let rObj      x000D     rObj  color         new Set arr map x   gt  x group    obj   x color false     x000D          filter x   gt  x    false  x000D     rObj  group     obj x000D     return rObj x000D     x000D  console log reformattedArray  x000D   x000D   x000D

User · Answer

My approach with a reducer    x000D   x000D  myArray     x000D     group   one   color   red    x000D     group   two   color   blue    x000D     group   one   color   green    x000D     group   one   color   black   x000D    x000D   x000D  console log myArray reduce   acc  curr    gt    x000D    const itemExists   acc find item   gt  curr group     item group  x000D    if itemExists   x000D      itemExists color       itemExists color  curr color  x000D     else  x000D      acc push  group  curr group  color   curr color    x000D      x000D    return acc  x000D          x000D   x000D   x000D

User · Answer

Another option is using reduce   and new Map   to group the array  Use Spread syntax to convert set object into an array    x000D   x000D  var myArray      group   one   color   red     group   two   color   blue     group   one   color   green     group   one   color   black    x000D   x000D  var result       myArray reduce  c   group color     gt    x000D    if   c has group   c set group   group color        x000D    c get group  color push color   x000D    return c  x000D     new Map    values     x000D   x000D  console log result   x000D   x000D   x000D

User · Answer

You can extend array functionality with the next:

Array.prototype.groupBy = function(prop) {
  var result = this.reduce(function (groups, item) {
      const val = item[prop];
      groups[val] = groups[val] || [];
      groups[val].push(item);
      return groups;
  }, {});
  return Object.keys(result).map(function(key) {
      return result[key];
  });
};

Usage example:

_x000D_

/* re-usable function */_x000D_
Array.prototype.groupBy = function(prop) {_x000D_
  var result = this.reduce(function (groups, item) {_x000D_
      const val = item[prop];_x000D_
      groups[val] = groups[val] || [];_x000D_
      groups[val].push(item);_x000D_
      return groups;_x000D_
  }, {});_x000D_
  return Object.keys(result).map(function(key) {_x000D_
      return result[key];_x000D_
  });_x000D_
};_x000D_
_x000D_
var myArray = [_x000D_
  {group: "one", color: "red"},_x000D_
  {group: "two", color: "blue"},_x000D_
  {group: "one", color: "green"},_x000D_
  {group: "one", color: "black"}_x000D_
]_x000D_
_x000D_
console.log(myArray.groupBy('group'));

_x000D_

Credits: @Wahinya Brian

[javascript] Group array items using object

The answer is

Examples related to javascript

Tags