I have an object array like so:

 const data = [
    {category: {id: 1, name: 'beverage'}, title: 'Tea'},
    {category: {id: 1, name: 'beverage'}, title: 'Coffee'},
    {category: {id: 2, name: 'snacks'}, title: 'French fries'},
  ];

I want the result like so:

const transformed = [
  {
    category: "beverage",
    data: [{title:'coffee'},{title:'tea'}, ...]
  },
  {
    category: "snacks",
    data: [{title:'french fries'},...]
  },
..
]

What i did was:

 let transformed = data?.map(function (obj) {
    var result = {
      category: obj.category.title,
      data: [],
    };
    for (var key in obj) {
      if (obj.hasOwnProperty(key) && key === 'category') {
        result.values.push(obj);
      }
    }

    return result;
  });

But with this approach i am getting duplicate category names for every object in the array.

CodePudding user response：

As with all grouping operations the key is to use reduce to build up a new object.

const data = [
    {category: {id: 1, name: 'beverage'}, title: 'Tea'},
    {category: {id: 1, name: 'beverage'}, title: 'Coffee'},
    {category: {id: 2, name: 'snacks'}, title: 'French fries'},
  ];
  
const result = Object.values(data.reduce( (a,i) => {
    a[i.category.id] = a[i.category.id] || {category:i.category.name, data:[]};
    a[i.category.id].data.push({title:i.title});
    return a;
},{}));

console.log(result);

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You could group by name of category and use an object for getting groupd values.

const 
    data = [{ category: { id: 1, name: 'beverage' }, title: 'Tea' }, { category: { id: 1, name: 'beverage' }, title: 'Coffee' }, { category: { id: 2, name: 'snacks' }, title: 'French fries' }],
    result = Object.values(data.reduce((r, { category: { name: category }, title  }) => {
        (r[category] ??= { category, data: [] }).data.push({ title });
        return r;
    }, {}));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Check this out

const data = [
    {category: {id: 1, name: 'beverage'}, title: 'Tea'},
    {category: {id: 1, name: 'beverage'}, title: 'Coffee'},
    {category: {id: 2, name: 'snacks'}, title: 'French fries'},
  ];

const transform = (data) => {
  const grouped = data.reduce((acc, obj) => {
    const { category: { id, name }, title } = obj;
    acc[id] = (acc[id]) 
      ? { 
          ...acc[id], 
          data: [...acc[id].data, { title }], 
        }
      : { category: name, data: [{ title }] };

    return acc; 
  }, {});
  
  return Object.values(grouped);
};

console.dir(transform(data), {depth: null});
// [
//   { category: 'beverage', data: [{ title: 'Tea' }, { title: 'Coffee' }] },
//   { category: 'snacks', data: [{ title: 'French fries' }]}
// ]