How to create an array in an object after filtering and mapping it?

Question

I have an object and there are some similarities with the type and id. If the type and the id match, I would like to change content into an array and store all the relevent contents there.

I can’t seem to wrap my head around objects and mapping. Any help would greatly appreciated. Thank you.

[{
type: 'movs',
id: '1001',
content: '111'
},
{
type: 'books',
id: '1001',
content: '222'
},
{
type: 'books',
id: '1001',
content: '333'
},
{
type: 'books',
id: '1002',
content: '444'
},
{
type: 'movs',
id: '1001',
content: '112'
},
{
type: 'movs',
id: '1005',
content: '113'
}]

to become

[{
type: 'movs',
id: '1001',
content: ['111', '112']
},
{
type: 'movs',
id: '1005',
content: ['113']
},
{
type: 'books',
id: '1001',
content: ['222', '333']
},
{
type: 'books',
id: '1002',
content: ['444']
}]

Edited: quotes

^ By syntax, you just need to replace the `’` and `‘` with `'`. — Jack Bashford, Oct 23 '19 at 04:55
This is not my homework. I am a ux designer mainly focused on adobe xd and principle. I am new to programming languages and am trying to learn javascript. Also, if there are any resources where I could learn more about objects, it would be helpful. Thank you. — snowbird, Oct 23 '19 at 04:55
@snowbird so you can read about `reduce` and learn how to do group by operation on array, and then try, if you still stuck just post the code you tried and people here are more than happy to help :) — Code Maniac, Oct 23 '19 at 04:58
sorry about the quotes. I typed them out in the text box and then added spaces at the front. i didn't notice it until it was pointed out — snowbird, Oct 23 '19 at 05:01
This will help you get some idea [`Most efficient way to do group by in JavaScript`](https://stackoverflow.com/questions/14446511/most-efficient-method-to-groupby-on-an-array-of-objects) — Code Maniac, Oct 23 '19 at 05:04

Jack Bashford · Answer 1 · 2019-10-23T05:11:57.237

Once you fix the invalid quotes, you just use reduce:

const arr = [{type:"movs",id:"1001",content:"111"},{type:"books",id:"1001",content:"222"},{type:"books",id:"1001",content:"333"},{type:"books",id:"1002",content:"444"},{type:"movs",id:"1001",content:"112"},{type:"movs",id:"1005",content:"113"}];

const res = Object.values(arr.reduce((a, { type, content, id }) => (a[`${type}_${id}`] = (a[`${type}_${id}`] || { type, id, content: [] }), a[`${type}_${id}`].content.push(content), a), {}));

console.log(res);

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

More verbose/understandable version:

const arr = [{type:"movs",id:"1001",content:"111"},{type:"books",id:"1001",content:"222"},{type:"books",id:"1001",content:"333"},{type:"books",id:"1002",content:"444"},{type:"movs",id:"1001",content:"112"},{type:"movs",id:"1005",content:"113"}];

const res = arr.reduce((accumulator, currentItem) => {
  let { type, id, content } = currentItem;
  let uniqueIdentifier = `${type}_${id}`; 
// { type, id, content: [] }), a[`${type}_${id}`].content.push(content), a), {}));
  if (accumulator[uniqueIdentifier]) {
    accumulator[uniqueIdentifier].content.push(content);
  }
  else {
    accumulator[uniqueIdentifier] = { type, id, content: [content] };
  }
  return accumulator;
}, {});

const resultArr = Object.values(res);

console.log(resultArr);

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

I know @CodeManiac, just doing that now. – Jack Bashford Oct 23 '19 at 05:08 — Jack Bashford, Oct 23 '19 at 05:08

How to create an array in an object after filtering and mapping it?

1 Answers1