对对象的元素进行分组。 （underscore.js）

Question

I have an object as shown below :

[
{"ClientGroupName":"ABC","CompanyName":"AA","ControlGroupName":"1"},
{"ClientGroupName":"ABC","CompanyName":"BB","ControlGroupName":"1"},
{"ClientGroupName":"ABC","CompanyName":"CC","ControlGroupName":"1"},
{"ClientGroupName":"ABC","CompanyName":"DD","ControlGroupName":"2"},
{"ClientGroupName":"ABC","CompanyName":"EE","ControlGroupName":"3"},
{"ClientGroupName":"DEF","CompanyName":"FF","ControlGroupName":"1"},
{"ClientGroupName":"DEF","CompanyName":"GG","ControlGroupName":"1"},
{"ClientGroupName":"DEF","CompanyName":"HH","ControlGroupName":"2"}
]

I need to group it like this :

 [    
    [
        [
         {"ClientGroupName":"ABC","CompanyName":"AA","ControlGroupName":"1"},
         {"ClientGroupName":"ABC","CompanyName":"BB","ControlGroupName":"1"},
         {"ClientGroupName":"ABC","CompanyName":"CC","ControlGroupName":"1"}
        ],
        [{"ClientGroupName":"ABC","CompanyName":"DD","ControlGroupName":"2"}],
        [{"ClientGroupName":"ABC","CompanyName":"EE","ControlGroupName":"3"}]
    ],
    [
        [
         {"ClientGroupName":"DEF","CompanyName":"FF","ControlGroupName":"1"},
         {"ClientGroupName":"DEF","CompanyName":"GG","ControlGroupName":"1"}
        ],
        [{"ClientGroupName":"DEF","CompanyName":"HH","ControlGroupName":"2"}]
    ]    
]

I am using underscore.js to group the elements in the object.

 $scope.InitController = function () {      

   ClientGroupService.GetClientGroupList().then(function (response) {    
    $scope.groupByTwoFields = [];
    $scope.groupByTwoFields = _.groupBy(response.data, function (obj) {
                    return obj.ClientGroupName  + '|' + obj.ControlGroupName;
                });
       .....
   });
};

The output from the above code looks like :

[   
        [
         {"ClientGroupName":"ABC","CompanyName":"AA","ControlGroupName":"1"},
         {"ClientGroupName":"ABC","CompanyName":"BB","ControlGroupName":"1"},
         {"ClientGroupName":"ABC","CompanyName":"CC","ControlGroupName":"1"}
        ],
        [{"ClientGroupName":"ABC","CompanyName":"DD","ControlGroupName":"2"}],
        [{"ClientGroupName":"ABC","CompanyName":"EE","ControlGroupName":"3"}],  
        [
         {"ClientGroupName":"DEF","CompanyName":"FF","ControlGroupName":"1"},
         {"ClientGroupName":"DEF","CompanyName":"GG","ControlGroupName":"1"}
        ],
        [{"ClientGroupName":"DEF","CompanyName":"HH","ControlGroupName":"2"}]   
]

What do I need to do in order to get the desired output as shown above.

Your code producing the output in the below shown form :

  [ 
        [
         {"ClientGroupName":"ABC","CompanyName":"AA","ControlGroupName":"1"},
         {"ClientGroupName":"ABC","CompanyName":"BB","ControlGroupName":"1"},
         {"ClientGroupName":"ABC","CompanyName":"CC","ControlGroupName":"1"},
         {"ClientGroupName":"ABC","CompanyName":"DD","ControlGroupName":"2"},
         {"ClientGroupName":"ABC","CompanyName":"EE","ControlGroupName":"3"}
        ],  
        [
         {"ClientGroupName":"DEF","CompanyName":"FF","ControlGroupName":"1"},
         {"ClientGroupName":"DEF","CompanyName":"GG","ControlGroupName":"1"},
        {"ClientGroupName":"DEF","CompanyName":"HH","ControlGroupName":"2"}]    
]

Answer 1

i did it with just vanillaJS in case the answer above didn't work for you:

var data = [

        {"ClientGroupName":"ABC","CompanyName":"AA","ControlGroupName":"1"},

        {"ClientGroupName":"ABC","CompanyName":"BB","ControlGroupName":"1"},

        {"ClientGroupName":"ABC","CompanyName":"CC","ControlGroupName":"1"},

        {"ClientGroupName":"ABC","CompanyName":"DD","ControlGroupName":"2"},

        {"ClientGroupName":"ABC","CompanyName":"EE","ControlGroupName":"3"},

        {"ClientGroupName":"DEF","CompanyName":"FF","ControlGroupName":"1"},

        {"ClientGroupName":"DEF","CompanyName":"GG","ControlGroupName":"1"},

        {"ClientGroupName":"DEF","CompanyName":"HH","ControlGroupName":"2"}

    ];



    var ClientGroupNames = [];

    data.forEach(function(o){

        if(ClientGroupNames.indexOf(o.ClientGroupName) < 0){

            ClientGroupNames.push(o.ClientGroupName);

        }

    });

    var result = ClientGroupNames.map(function(name){

        return data.filter(function(comp){

            return comp.ClientGroupName == name ? true : false;

        })

    }).map(function(grp){

        var groupNames = [];

        grp.forEach(function(company){

            if(groupNames.indexOf(company.ControlGroupName) < 0)

                groupNames.push(company.ControlGroupName);

        })

        return groupNames.map(function(name){

            return grp.filter(function(gp){

                return gp.ControlGroupName == name ? true : false;

            })

        })
    })

Answer 2

_.groupBy doesn't return an array, it returns an object.

   var data = [{
  "ClientGroupName": "ABC",
  "CompanyName": "AA",
  "ControlGroupName": "1"
}, {
  "ClientGroupName": "ABC",
  "CompanyName": "BB",
  "ControlGroupName": "1"
}, {
  "ClientGroupName": "ABC",
  "CompanyName": "CC",
  "ControlGroupName": "1"
}, {
  "ClientGroupName": "ABC",
  "CompanyName": "DD",
  "ControlGroupName": "2"
}, {
  "ClientGroupName": "ABC",
  "CompanyName": "EE",
  "ControlGroupName": "3"
}, {
  "ClientGroupName": "DEF",
  "CompanyName": "FF",
  "ControlGroupName": "1"
}, {
  "ClientGroupName": "DEF",
  "CompanyName": "GG",
  "ControlGroupName": "1"
}, {
  "ClientGroupName": "DEF",
  "CompanyName": "HH",
  "ControlGroupName": "2"
}];

var obj = _.groupBy(data,function (obj) {
    return obj.ClientGroupName;
}); // groupBy returns an object, not a array
var result = Object.keys(obj).map(function (key) { return obj[key]; }); // this converts the object to an array

_.each(result,function(obj,index){ // loop through each item in the array
  var _obj = _.groupBy(obj,function(obj2){
    return obj2.ControlGroupName;
  }); // group it by the ControlBroupName and convert it to a array
  result[index] = Object.keys(_obj).map(function (key) { return _obj[key]; });

});

console.log("result:\n", result);

Answer 3

Here's a very simple function to do it in vanilla JavaScript, it takes two arguments:
arr The array containing the objects that you want to group.
properties An array of strings with the names of the properties you want to group the objects by, ordered by priority (objects will be ordered by the first property in the array, then the second, etc).

function groupByProperties(arr, properties) {
    const groups = {
        root: {
            array: [],
            children: {}
        }
    };

    arr.forEach(obj => {
        let group = groups.root;
        properties.forEach(propertyKey => {
            const property = obj[propertyKey];
            if (!group.children.hasOwnProperty(property)) {
                const child = {
                    array: [],
                    children: {}
                }
                group.array.push(child.array);
                group.children[property] = child;
            }
            group = group.children[property];
        });
        group.array.push(obj);
    });
    return groups.root.array;
}

You would use it as follows:

let data = [
    {"ClientGroupName":"ABC","CompanyName":"AA","ControlGroupName":"1"},
    {"ClientGroupName":"ABC","CompanyName":"BB","ControlGroupName":"1"},
    {"ClientGroupName":"ABC","CompanyName":"CC","ControlGroupName":"1"},
    {"ClientGroupName":"ABC","CompanyName":"DD","ControlGroupName":"2"},
    {"ClientGroupName":"ABC","CompanyName":"EE","ControlGroupName":"3"},
    {"ClientGroupName":"DEF","CompanyName":"FF","ControlGroupName":"1"},
    {"ClientGroupName":"DEF","CompanyName":"GG","ControlGroupName":"1"},
    {"ClientGroupName":"DEF","CompanyName":"HH","ControlGroupName":"2"}
];

console.log(groupByProperties(data, ["ClientGroupName", "ControlGroupName"]));

Answer 4

You have to groupBy twice:

result = _(data).groupBy('ClientGroupName').map(g =>
    _.values(_.groupBy(g, 'ControlGroupName'))
).value()