Merge & Group Two Javascript array of objects and Group

The following does the trick:

var items = [{ id: '001', name: 'item1', description: 'description of item1', categoryId: 'cat1' },   { id: '002', name: 'item2', description: 'description of item2', categoryId: 'cat2' }, { id: '003', name: 'item3', description: 'description of item3', categoryId: 'cat1' }, { id: '004', name: 'item4', description: 'description of item4' } ];

var categories = [ { id: 'cat1', name: 'Category1' }, { id: 'cat2', name: 'Category2' } ];

var output = categories.concat([{id:'',name:''}]).map(function(v) {
  return {
    categoryId: v.id,
    name: v.name,
    items: items.filter(function(o) {
      return o.categoryId === v.id || !o.categoryId && !v.id;
    })
  };
});

console.log(output);

I start by using .concat() to create a new categories array that holds the original categories items plus an "empty" category. Then I .map() that array to return category objects with your desired output structure, each of which has an items array that is produced by .filter()ing the original items array.

(Note that the items arrays within the output contain references to the same objects that were in the original items input, not copies of them. If you wanted copies you could add another .map() after the .filter().)

You can accomplish the desired result using a reduce. We are going to start with the original categories array and reduce the items array into it.

var items = [
  { id: '001', name: 'item1', description: 'description of item1', categoryId: 'cat1' },
  { id: '002', name: 'item2', description: 'description of item2', categoryId: 'cat2' },
  { id: '003', name: 'item3', description: 'description of item3', categoryId: 'cat1' },
  { id: '004', name: 'item4', description: 'description of item4' } 
];

var categories = [
  { id: 'cat1', name: 'Category1' },
  { id: 'cat2', name: 'Category2' }
];


// Lets add the empty category at the beginning. This simplifies the logic.
categories.push({ id: '', name: '' });

// This is a function that will return a function to be used as a filter later on
function createFilter (category) {
  return function (item) {
    return item.id === category;
  };
}

var mergedSet = items.reduce(function (previous, current) {
  // Get the category ID of the current item, if it doesn't exist set to empty string
  var categoryId = current.categoryId || '';

  // Find the cateogry that matches the category ID
  var category = previous.find(createFilter(categoryId));

  // If the items property doesn't exists (we don't have any items), create an empty array
  if (!category.items) { category.items = []; }

  // Add the item the category
  category.items.push(current);

  // Return the current value that will be used in the next iteration.
  // Note, the initial value of previous will be the intial value of categories.
  return previous;

}, categories);

console.log(mergedSet);

/* Output
[ 
  { id: 'cat1',
    name: 'Category1',
    items:
     [ { id: '001',
         name: 'item1',
         description: 'description of item1',
         categoryId: 'cat1' },
       { id: '003',
         name: 'item3',
         description: 'description of item3',
         categoryId: 'cat1' } 
      ] 
  },
  { id: 'cat2',
    name: 'Category2',
    items:
     [ { id: '002',
         name: 'item2',
         description: 'description of item2',
         categoryId: 'cat2' 
        } 
      ] 
  },
  { id: '',
    name: '',
    items: 
      [ { id: '004', 
          name: 'item4', 
          description: 'description of item4' } ] }
 ]
*/

Assuming the variables categories and items are assigned as you defined above:

const keyedCategories = _(categories)
  .concat({ id: '', name: '' })
  .keyBy('id')
  .value();

const groupedItems = _.groupBy(items, (item) => _.get(item, 'categoryId', ''));

const result = _.reduce(groupedItems, (acc, value, key) => {
  const { id: categoryId, name } = keyedCategories[key];
  return _.concat(acc, { categoryId, name, items: value });
}, []);