Javascript - Filter and/or Group Array of Objects by property

Question

Hi I have this array of objects

{
    "events": [
        {
            "id": 0,
            "description": "Monthly play with friends",
            "categoryId": 0
        },
        {
            "id": 1,
            "description": "Buy Goods",
            "categoryId": 2
        },
        {
            "id": 2,
            "description": "Yoga",
            "categoryId": 1
        },
        {
            "id": 3,
            "description": "Lunch",
            "categoryId": 0
        },
        {
            "id": 4,
            "description": "Feed wild & free Bearded Dragons",
            "categoryId": 3
        },
        {
            "id": 5,
            "description": "Come to help our little friends",
            "categoryId": 3
        },
        {
            "id": 6,
            "description": "Come and share your expertise",
            "categoryId": 3
        },
        {
            "id": 7,
            "description": "Dinner with Brother",
            "categoryId": 2
        }
    ]
}

I need to show the items grouped by CategoryId, showing CategoryID as the title of the group, and then list the items of that category inside.

CategoryId 0 Monthly play with friends Lunch

CategoryId 1 Yoga

CategoryId 2 Buy Goods Dinner with Brother

and so on....

Related: [How can I transform an array of objects into a new array of objects grouped by property?](https://stackoverflow.com/questions/59959018/how-can-i-transform-an-array-of-objects-into-a-new-array-of-objects-grouped-by-p) — zcoop98, May 20 '21 at 22:31

score 2 · Answer 1 · edited May 21 '21 at 04:01

2

Try using the Array.prototype.reduce() function:

let ans = events.reduce((cum, x) => {
  if (cum['category ' + x.categoryId] == null) {
    cum['category ' + x.categoryId] = [x.description];
    return cum;
  } else {
    cum['category ' + x.categoryId].push(x.description);
    return cum;
  }
}, {});

edited May 21 '21 at 04:01

zcoop98

2,590
1
18
31

answered May 20 '21 at 21:43

Tushar Shahi

16,452
1
18
39

+1 for the variable name ;) and ofc the working solution. I love filter and map functiond. But i find reduce way harder to read than a normal loop. – Raphael PICCOLO Jun 01 '21 at 17:51

Ronak Kapadi · Answer 2 · 2023-01-24T05:39:17.413

You can use the custom function using grouping by categories or another key. I have already created a custom function, you can use easily.

const groupedBy = (array) => {
  const grouped = {}
  let types = [...new Set(array.map(({
    type
  }) => type))]
  types.forEach((type) => {
    grouped[type] = array.filter(a => a.type === type)
  })
  return grouped
}

groupedBy([{
  name: 'h',
  type: 'user'
}, {
  name: 'r',
  type: 'user'
}, {
  name: 'v',
  type: 'user'
}, {
  name: 'p',
  type: 'admin'
}, {
  name: 'k',
  type: 'admin'
}])

score 0 · Accepted Answer · answered May 20 '21 at 21:42

one ez for loop should suffice :

const data = { events: ... }

var obj = {};
for (let event of data.events) {
  // if empty, creates a array
  obj[event.categoryId] = obj[event.categoryId] || [];
  // add data in that array
  obj[event.categoryId].push(event);
}

now you have a table for each categoryId, feel free to display it as you like

for (let categoryId in obj) {
  console.log(categoryId, obj[categoryId]);
// or
//  console.log(categoryId, obj[categoryId].map(x => x.description).join(','));
}

score 0 · Answer 4 · answered May 20 '21 at 21:57

You need to create a 2-D array that has the same amount of indexes as there are categories. In each of those indexes will be an array of all descriptions that match that category

You then need to run a for loop for each object in the array, storing their 'description' value in the relevant index.

You can then print the index (which will match category ) along with all descriptions contained

var events= [
        {
            "id": 0,
            "description": "Monthly play with friends",
            "categoryId": 0
        },
        {
            "id": 1,
            "description": "Buy Goods",
            "categoryId": 2
        },
        {
            "id": 2,
            "description": "Yoga",
            "categoryId": 1
        },
        {
            "id": 3,
            "description": "Lunch",
            "categoryId": 0
        },
        {
            "id": 4,
            "description": "Feed wild & free Bearded Dragons",
            "categoryId": 3
        },
        {
            "id": 5,
            "description": "Come to help our little friends",
            "categoryId": 3
        },
        {
            "id": 6,
            "description": "Come and share your expertise",
            "categoryId": 3
        },
        {
            "id": 7,
            "description": "Dinner with Brother",
            "categoryId": 2
        }
    ];
var eventGroup = [];
for(var i in events){
    if(parseInt(events[i].categoryId) >= eventGroup.length){
        while(eventGroup.length <= parseInt(events[i].categoryId)){
            eventGroup.push([]);
        }
    }
console.log(eventGroup);
    eventGroup[parseInt(events[i].categoryId)].push(events[i].description);
}
for(var f= 0 ; f< eventGroup.length; f++){
    console.log(f + " " + eventGroup[f]);
}

Javascript - Filter and/or Group Array of Objects by property

4 Answers4

Linked