Create a map using 2 lists where the keys are strings and values are array of objects

Question

I have the following where I am adding objects into an array based on the catType value.
This works fine. But is there a way I could have written this more elegantly?
Possibly combining the steps plus without having to create empty arrays for the map at the start.

const cats = ['cat1', 'cat2']

let newMap = {};
// initialise map with values from above array as keys and values as empty arrays 
cats.forEach(category => {
    newMap[category.title] = [];
});

// list of objects
const newList = [
    {
        catType: 'cat1',
        name: 'name1'
    },
    {
        catType: 'cat2',
        name: 'name2'
    },
    {
        catType: 'cat1',
        name: 'name3'
    },
    {
        catType: 'cat2',
        name: 'name4'
    },
    {
        catType: 'cat1',
        name: 'name5'
    }
]

// add each object to a list in above map based on the `catType` value
newList.forEach(detail => {
    newMap[detail.catType].push(detail);
});

Expected outcome

{
    cat1: [
        {
            catType: 'cat1',
            name: 'name1'
        },
        {
            catType: 'cat1',
            name: 'name3'
        },
        {
            catType: 'cat1',
            name: 'name5'
        }
    ],
    cat2: [
        {
            catType: 'cat2',
            name: 'name2'
        },
        {
            catType: 'cat2',
            name: 'name4'
        }
    ],
}

To note:

I have looked at another prior question with some answers.
The answers in there is not what I am looking for.
This is to achieve a map where the keys are strings and values are array of objects.
And the data is obtained from 2 lists (newList and cats).
This is the past question for reference.
https://stackoverflow.com/questions/14446511/most-efficient-method-to-groupby-on-an-array-of-objects

Answer 1

Simple sort, nothing fancy here.

// list of objects
const newList = [
    {
        catType: 'cat1',
        name: 'name1'
    },
    {
        catType: 'cat2',
        name: 'name2'
    },
    {
        catType: 'cat1',
        name: 'name3'
    },
    {
        catType: 'cat2',
        name: 'name4'
    },
    {
        catType: 'cat1',
        name: 'name5'
    }
]

let cats1 = [];
let cats2 = [];

var sortCats = () => {
  for(let listItem of newList) {
    if (listItem.catType === "cat1") cats1.push(listItem);
    if (listItem.catType === "cat2") cats2.push(listItem)
  }
}

sortCats();

let obj = {
  cat1: cats1,
  cat2: cats2
}


console.log(obj);

Answer 2

Since it seems like all cats are mentioned again as catType properties:

newList.reduce((acc, curr) => {
  if (acc.hasOwnProperty(curr.catType)) {
    acc[curr.catType].push(curr);
  } else {
    acc[curr.catType] = [curr];
  }

  return acc;
}, {});

Which, yeah, is just a groupBy. Abstract away the field by which the grouping is supposed to happen and you got yourself a groupBy fn:

let groupBy = (array, field) => {
  return array.reduce((acc, curr) => {
    if (acc.hasOwnProperty(curr[field]) {
      acc[curr[field]].push(curr);
    } else {
      acc[curr[field]] = [curr];
    }

    return acc;
  }, {});
}

groupBy(newList, 'catType');

Bonus points if you do everything without mutation, but that's out of scope for this answer.

Answer 3

here's one way:

const cats = ['cat1', 'cat2']
const newList = [
    { catType: 'cat1', name: 'name1' },
    { catType: 'cat2', name: 'name2' },
    { catType: 'cat1', name: 'name3' },
    { catType: 'cat2', name: 'name4' },
    { catType: 'cat1', name: 'name5' }
]

cats.map(c => {return {[c]: newList.filter(nl => nl['catType'] === c)}})

=> [
    {
      cat1: [
        {catType: "cat1", name: "name1"},
        {catType: "cat1", name: "name3"},
        {catType: "cat1", name: "name5"}
      ]
    },  
    {
      cat2: [
        {catType: "cat2", name: "name2"},
        {catType: "cat2", name: "name4"}
      ]
    }   
]