JSFiddle - React, Tailwind, and code Playground

by Alexey

JavaScript

var myArr = [{
      name: 'yellow',
      id: 75,
      fresh: false,
      category: 'betta'
    },
    {
      name: 'red',
      id: 75,
      fresh: true,
      category: 'alfa'
    },
    {
      name: 'blue',
      id: 25,
      fresh: false,
      category: 'alfa'
    },
    {
      name: 'green',
      id: 55,
      fresh: true,
      category: 'betta'
    },
    {
      name: 'orange',
      id: 85,
      fresh: true,
      category: 'delta'
    },
  ],
  result = Object.values(myArr.reduce((r, o) => {
    r[o.category] = r[o.category] || {
      'category': o.category,
      'details': []
    };

      r[o.category]['details'].push({
          'name': o.name,
          'id': o.id,
          'fresh': o.fresh
        }); 
    return r;
  }, {}));

console.log(result);