Grouping Arrays of Objects by Property using javaScript

I was working on a project where I used REST API to fetch data which returns back as array of objects for each row. Once I get the data I want to group the data that is coming back easily using javaScript.

Here is the scenario: The array looks like something belew

0: {__metadata: {…}, FirstUniqueAncestorSecurableObject: {…}, RoleAssignments: {…}, AttachmentFiles: {…}, ContentType: {…}, …}
1: {__metadata: {…}, FirstUniqueAncestorSecurableObject: {…}, RoleAssignments: {…}, AttachmentFiles: {…}, ContentType: {…}, …}
2: {__metadata: {…}, FirstUniqueAncestorSecurableObject: {…}, RoleAssignments: {…}, AttachmentFiles: {…}, ContentType: {…}, …}
3: {__metadata: {…}, FirstUniqueAncestorSecurableObject: {…}, RoleAssignments: {…}, AttachmentFiles: {…}, ContentType: {…}, …}
4: {__metadata: {…}, FirstUniqueAncestorSecurableObject: {…}, RoleAssignments: {…}, AttachmentFiles: {…}, ContentType: {…}, …}
5: {__metadata: {…}, FirstUniqueAncestorSecurableObject: {…}, RoleAssignments: {…}, AttachmentFiles: {…}, ContentType: {…}, …}
6: {__metadata: {…}, FirstUniqueAncestorSecurableObject: {…}, RoleAssignments: {…}, AttachmentFiles: {…}, ContentType: {…}, …}
7: {__metadata: {…}, FirstUniqueAncestorSecurableObject: {…}, RoleAssignments: {…}, AttachmentFiles: {…}, ContentType: {…}, …}
length: 8
__proto__: Array(0)

I wanted the array to be grouped by any existing property, say RoleAssignments:

if the array is in a variable called arr, the function group(arr,’RoleAssignments’) looks like below

 


         function group(arr, property) {
                return arr.reduce(function (groups, item) {
                    var val = item[prop];
                    groups[val] = groups[val] || [];
                    groups[val].title = val;
                    groups[val].push(item);
                    return groups;
                }, {});
            }



The output will look like something below:


(5) [{…}, {…}, {…}, {…}, {…}]
0: {RoleAssignments: "6210", documents: Array(1), id: "6210Budget", $$hashKey: "object:19"}
1: {RoleAssignments: "6220", documents: Array(1), id: "6220Budget", $$hashKey: "object:20"}
2: {RoleAssignments: "6230", documents: Array(4), id: "6230Budget", $$hashKey: "object:21"}
3: {RoleAssignments: "6240", documents: Array(1), id: "6240Budget", $$hashKey: "object:22"}
4: {RoleAssignments: "Other", documents: Array(1), id: "OtherBudget", $$hashKey: "object:23"}
length: 5__proto__: Array(0)

If you look in to the returned data, it is an array of 5 objects where the first object has 1 doc, the second has 1 doc, third 4 doc, the fourth has 1 and the fifth 1 a total of 8 documents which is equal to the input array.

Use  the code and modify as you like.

 

Note: I have tried to overload the Array Object which works in many browsers and breaks some functionality in IE. I suggest to use a private function as shown  above.

Reach out to me @TesfayeGari linked in  and Twitter. or email Tesfaye.Gari@gmail.com

 

Enjoy Coding!

Leave a Reply

ADDRESS

901 S Highland St Room 314
Arlington, Virginia 22204
Phone: (240) 547-6851

About MTM

MTM Training and Consulting is started by a group of highly qualified and motivated Information Technology Professionals to help you boost your IT career, and your company's productivity
Read More