Restructure array based on a particular key together- javascript

Question

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.

I'm confused on the expected result's second value being title where first is category... explanation on that or just something you missed? And if it's not an error, what differs from the two? — insyri
– insyri, Commented Nov 10, 2021 at 12:23
with ur code i get TypeError: Cannot read properties of undefined (reading 'push') — john Smith
– john Smith, Commented Nov 10, 2021 at 12:26
The new array should contain objects based on category names. For example the first object should contain the category name 'beverage' and then an array of beverage items in the list. It was mistakenly quoted as title instead of category — FortuneCookie
– FortuneCookie, Commented Nov 10, 2021 at 12:26

Jamiec · Accepted Answer · 2021-11-10 12:27:49Z

3

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

answered Nov 10, 2021 at 12:27

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FortuneCookie Over a year ago

Clean! :) :thumbsup:

Nina Scholz · Accepted Answer · 2021-11-10 12:27:36Z

3

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

answered Nov 10, 2021 at 12:27

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

3 Comments

A1exandr Belan Over a year ago

Nice and clean! Pretty code.

A1exandr Belan Over a year ago

Can you tell me the name of the pattern used to solve this problem? When we group objects by property and return the answer as Object.values(...)

Nina Scholz Over a year ago

it has no real name, but it's grouping with a hash table.

A1exandr Belan · Accepted Answer · 2021-11-10 13:51:16Z

0

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

edited Nov 10, 2021 at 13:51

answered Nov 10, 2021 at 12:39

A1exandr Belan

4,7803 gold badges30 silver badges53 bronze badges

Collectives™ on Stack Overflow

Restructure array based on a particular key together- javascript

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related