CODEWITHSUNDEEP
javascriptarraysobjectfilter
Carlos Spagnoletti
Carlos Spagnoletti

Reputation: 3

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

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....

Upvotes: 0

Views: 3557

Answers (4)

Ronak Kapadi
Ronak Kapadi

Reputation: 11

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'
}])

Upvotes: 1

Tushar Shahi
Tushar Shahi

Reputation: 20626

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;
  }
}, {});

Upvotes: 2

StarshipladDev
StarshipladDev

Reputation: 1145

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]);
}

Upvotes: 0

Raphael PICCOLO
Raphael PICCOLO

Reputation: 2175

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(','));
}

Upvotes: 0

Related Questions