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

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"  }],
    }

CodePudding user response：

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.

CodePudding user response：

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))