javascriptsortingunderscore.jsgroupinglodash

using lodash .groupBy. how to add your own keys for grouped output?


I have this sample data returned from an API.

I'm using Lodash's _.groupBy to convert the data into an object I can use better. The raw data returned is this:

[
    {
        "name": "jim",
        "color": "blue",
        "age": "22"
    },
    {
        "name": "Sam",
        "color": "blue",
        "age": "33"
    },
    {
        "name": "eddie",
        "color": "green",
        "age": "77"
    }
]

I want the _.groupBy function to return an object that looks like this:

[
    {
        color: "blue",
        users: [
            {
                "name": "jim",
                "color": "blue",
                "age": "22"
            },
            {
                "name": "Sam",
                "color": "blue",
                "age": "33"
            }
        ]
    },
    {
        color: "green",
        users: [
            {
                "name": "eddie",
                "color": "green",
                "age": "77"
            }
        ]
    }
]

Currently I'm using

_.groupBy(a, function(b) { return b.color})

which is returning this.

{blue: [{..}], green: [{...}]}

the groupings are correct, but I'd really like to add the keys I want (color, users). is this possible using _.groupBy? or some other LoDash utility?


Solution

  • You can do it like this in both Underscore and Lodash (3.x and 4.x).

    var data = [{
      "name": "jim",
      "color": "blue",
      "age": "22"
    }, {
      "name": "Sam",
      "color": "blue",
      "age": "33"
    }, {
      "name": "eddie",
      "color": "green",
      "age": "77"
    }];
    
    console.log(
      _.chain(data)
        // Group the elements of Array based on `color` property
        .groupBy("color")
        // `key` is group's name (color), `value` is the array of objects
        .map((value, key) => ({ color: key, users: value }))
        .value()
    );
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>


    Original Answer

    var result = _.chain(data)
        .groupBy("color")
        .pairs()
        .map(function(currentItem) {
            return _.object(_.zip(["color", "users"], currentItem));
        })
        .value();
    console.log(result);
    

    Online Demo

    Note: Lodash 4.0 onwards, the .pairs function has been renamed to _.toPairs()