Group array object by category id using jquery

Question

I am trying to group my array by Id in jQuery, Here are the details of my code and what I am trying to achieve.

var result = Array[5] // array of 5 records
Array[0]: 
   Description: "Testing Desc1"
   CategoryName: "Fruit"
   CategoryId : 1
   Title: "Data1"
Array[1]: 
   Description: "Testing Desc2"
   CategoryName: "Veg"
   CategoryId : 2
   Title: "Data2"
Array[2]: 
   Description: "Testing Desc3"
   CategoryName: "Fruit"
   CategoryId : 1
   Title: "Data3"
Array[3]: 
   Description: "Testing Desc4"
   CategoryName: "Grains"
   CategoryId : 3
   Title: "Data4"
Array[4]: 
   Description: "Testing Desc5"
   CategoryName: "Grains"
   CategoryId : 3
   Title: "Data5"

Each record has some categoryId in it which can be same for some of records, I need to group array on basis of category id and create a new json array.

My Required output is like this:

var data = [{
    Category: "Fruit",
    Data: [{
        Title: "Data1",
        Description: "Testing Desc1"
    }, {
        Title: "Data3",
        Description: "Testing Desc3"
    }]
}, {
    Category: "Veg",
    Data: [{
        Title: "Data2",
        Description: "Testing Desc2"
    }]
}, {
    Category: "Grains",
Data: [{
        Title: "Data4",
        Description: "Testing Desc4"
    }, {
        Title: "Data5",
        Description: "Testing Desc5"
    }]
}];

Please help!

So what have you tried so far? Also your object and result don't line up... CategoryName fruit is data1 and data3, and in the result fruit is data1 and data2, also veg is data2 and then turns into data3...and same with grains not lining up...? Is this an intended pattern? — ajmajmajma
– ajmajmajma, Commented Jul 23, 2016 at 19:00
Your input isn't any sort of valid array, so I can't tell you how to transform it into your required input. You'll need to show what your input is before anyone can help you rearrange it into what you need. — BobRodes
– BobRodes, Commented Jul 23, 2016 at 19:25
Input edited with correct values, thanks for pointing it out — Deepika Thakur
– Deepika Thakur, Commented Jul 24, 2016 at 2:42

RomanPerekhrest · Accepted Answer · 2016-07-23 19:30:37Z

1

In case that you are dealing with an array of objects - use the following approach with Array.forEach and Object.keys functions:

    var result = [
        {
            Description: "Testing Desc1",
            CategoryName: "Fruit",
            CategoryId: 1,
            Title: "Data1"},
        {
            Description: "Testing Desc2",
            CategoryName: "Veg",
            CategoryId: 2,
            Title: "Data2"},
        {
            Description: "Testing Desc3",
            CategoryName: "Fruit",
            CategoryId: 1,
            Title: "Data3"},
        {
            Description: "Testing Desc4",
            CategoryName: "Grains",
            CategoryId: 3,
            Title: "Data4"},
        {
            Description: "Testing Desc5",
            CategoryName: "Grains",
            CategoryId: 3,
            Title: "Data5"
        }
    ],
            groups = {};
    
    result.forEach(function (o){
        var dataObj = {Title: o.Title, Description: o.Description};
        if (groups[o.CategoryId]) {
            groups[o.CategoryId]['Data'].push(dataObj);
        } else {
            groups[o.CategoryId] = {Category: o.CategoryName, Data: [dataObj]};
        }
    });
    var data = Object.keys(groups).map(function(k) { return groups[k]; });
    
    console.log(JSON.stringify(data, 0, 4));

answered Jul 23, 2016 at 19:30

RomanPerekhrest

93.1k4 gold badges75 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Deepika Thakur Over a year ago

it worked like a charm... thanks a ton... you saved my day ......... :)

RomanPerekhrest Over a year ago

@DeepikaThakur, welcome, have you tried to accept the answer?

gaetanoM · Accepted Answer · 2016-07-23 19:33:52Z

My proposal is based on Array sort and Array reduce:

var data = [{
  Description: "Testing Desc1",
  CategoryName: "Fruit",
  CategoryId: 1,
  Title: "Data1"
}, {
  Description: "Testing Desc2",
  CategoryName: "Veg",
  CategoryId: 2,
  Title: "Data2"
}, {
  Description: "Testing Desc3",
  CategoryName: "Fruit",
  CategoryId: 1,
  Title: "Data3"
}, {
  Description: "Testing Desc4",
  CategoryName: "Grains",
  CategoryId: 3,
  Title: "Data4"
}, {
  Description: "Testing Desc5",
  CategoryName: "Grains",
  CategoryId: 3,
  Title: "Data5"
}];


var result = data.sort((a, b) => {return a.CategoryName.localeCompare(b.CategoryName);}).reduce(function(a,b,c) {
  if (c == 1) {
    if (a.CategoryName == b.CategoryName) {
      return [{
        Category: a.CategoryName,
        Data: [{
          Title: a.Title,
          Description: a.Description
        }, {
          Title: b.Title,
          Description: b.Description
        }]
      }];
    } else {
      return [{
        Category: a.CategoryName,
        Data: [{
          Title: a.Title,
          Description: a.Description
        }]
      }, {
        Category: b.CategoryName,
        Data: [{
          Title: b.Title,
          Description: b.Description
        }]
      }];
    }
  } else {
    if (a[a.length - 1].Category == b.CategoryName) {
      a[a.length - 1].Data.push({
        Title: b.Title,
        Description: b.Description
      });
    } else {
      a.push({
        Category: b.CategoryName,
        Data: [{
          Title: b.Title,
          Description: b.Description
        }]
      });
    }
    return a;
  }
});

console.log(JSON.stringify(result, null, 4));

Collectives™ on Stack Overflow

Group array object by category id using jquery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related