How to summarize object information in JavaScript

Question

I am trying to put together an object where some of this information was covered.

const tests = [
    {
        id: 1,
        name: 'taro',
        designId: 1,
        designName: 'design1'
    },
    {
        id: 1,
        name: 'taro',
        designId: 2,
        designName: 'design2'
    },
    {
        id: 2,
        name: 'Bob',
        designId: 3,
        designName: 'design3'
    },
    {
        id: 2,
        name: 'Bob',
        designId: 4,
        designName: 'design4'
    },
];

I want to set the following expectations.

result = [
  {
    id: 1,
    name: 'taro',
    designs: [
        { designId: 1, designName: 'design1' },
        { designId: 2, designName: 'design2' }
    ]
  },
  {
    id: 2,
    name: 'Bob',
    designs: [
        { designId: 3, designName: 'design3' },
        { designId: 4, designName: 'design4' }
    ]
  }
]

I have tried using lodash groupby as something I have tried, but I am struggling because I can't get rid of the extra properties.

const result = _.chain(tests)
    .groupBy('id')
    .map((value, key) => ({ id: key, designs: value }))
    .value();

Not following what you mean by "I can't get rid of the extra properties" ? — Jamiec, Sep 21 '21 at 08:51
@Jamiec With the code I tried, the "id" and "name" properties are still in the "designs". I want to add only the "designId" and "designName" to the "designs" like expectation. — Lana2548, Sep 21 '21 at 08:57
Does this answer your question? [Most efficient method to groupby on an array of objects](https://stackoverflow.com/questions/14446511/most-efficient-method-to-groupby-on-an-array-of-objects) — pilchard, Sep 21 '21 at 09:20

score 2 · Answer 1 · answered Sep 21 '21 at 09:02

When you map the groups, map the value, and omit the id and name from each group:

const tests = [{"id":1,"name":"taro","designId":1,"designName":"design1"},{"id":1,"name":"taro","designId":2,"designName":"design2"}];

const result = _(tests)
    .groupBy('id')
    .map((value, id) => ({
      id,
      name: value[0].name,
      designs: value.map(o => _.omit(o, ['id', 'name']))
    }))
    .value();
    
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Jamiec · Answer 2 · 2021-09-21T09:43:05.807

You can do this using reduce and a bit of object decomposition:

const tests = [
    {
        id: 1,
        name: 'taro',
        designId: 1,
        designName: 'design1'
    },
    {
        id: 1,
        name: 'taro',
        designId: 2,
        designName: 'design2'
    },
];

const result = Object.values(tests.reduce( (acc, {id,name,...rest}) => {
   if(!acc[id])
      acc[id] = {id,name,designs:[]};
   acc[id].designs.push( {...rest} )
   return acc;
},{}))

console.log(result);

score 1 · Answer 3 · answered Sep 21 '21 at 09:00

You can easily achieve the result using for..of loop

const tests = [
  {
    id: 1,
    name: "taro",
    designId: 1,
    designName: "design1",
  },
  {
    id: 1,
    name: "taro",
    designId: 2,
    designName: "design2",
  },
];

let result = {};
for (let { id, name, ...rest } of tests) {
  result.id
    ? result.designs.push(rest)
    : (result = { id, name, designs: [rest] });
}

console.log(result);

/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }

How to summarize object information in JavaScript

3 Answers3