Group array of object nesting some of the keys with specific names

Question

I have this array of objects, that I need to modify to make it easier the rendering.

const items = [
  {
    tab: 'Results',
    section: '2017',
    title: 'Full year Results',
    description: 'Something here',
  },
    {
    tab: 'Results',
    section: '2017',
    title: 'Half year Results',
    description: 'Something here',
  },
    {
    tab: 'Reports',
    section: 'Marketing',
    title: 'First Report',
    description: 'Something here',
  },
  ...
];

and I'm trying to modify it, grouping them by specific keys. The idea is to have this output. As you can see the names of the keys could be different than the actual names in the items. I think that makes a bit different from previous posts.

const output = [
  {
    tab: 'Results',
    sections: [
      {
         section: '2017',
         items: [ { 'item that belongs here' }, { ... } ],
      },
  },
  {
    tab: 'Reports',
    sections: [
      {
         section: 'Marketing',
         items: [ { ... }, { ... } ],
      },
  },
...
]

I tried using lodash.groupby, but it doesn't do exactly what i'm looking for. Any idea about how to approach it?

Many thanks!!

Possible duplicate of Group by array and add field and sub array in main array — Randall Valenciano
– Randall Valenciano, Commented Jan 24, 2018 at 15:22

Jamiec · Accepted Answer · 2018-01-24 15:28:33Z

This can be done with a clever combinartion of _.map and _.groupBy.

const items = [
  {
    tab: 'Results',
    section: '2017',
    title: 'Full year Results',
    description: 'Something here',
  },
    {
    tab: 'Results',
    section: '2017',
    title: 'Half year Results',
    description: 'Something here',
  },
    {
    tab: 'Reports',
    section: 'Marketing',
    title: 'First Report',
    description: 'Something here',
  }
];

function groupAndMap(items, itemKey, childKey, predic){
    return _.map(_.groupBy(items,itemKey), (obj,key) => ({
        [itemKey]: key,
        [childKey]: (predic && predic(obj)) || obj
    }));
}

var result = groupAndMap(items,"tab","sections", 
                   arr => groupAndMap(arr,"section", "items"));


console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Nina Scholz · Accepted Answer · 2018-01-24 16:31:48Z

3

You could use an object without additional libraries.

The object contains a property _ which keeps the nested arrays of the given nested group.

var items = [{ tab: 'Results', section: '2017', title: 'Full year Results', description: 'Something here' }, { tab: 'Results', section: '2017', title: 'Half year Results', description: 'Something here' }, { tab: 'Reports', section: 'Marketing', title: 'First Report', description: 'Something here' }],
    keys = { tab: 'sections', section: 'items' }, // or more if required
    result = [],
    temp = { _: result };

items.forEach(function (object) {
    Object.keys(keys).reduce(function (level, key) {
        if (!level[object[key]]) {
            level[object[key]] = { _: [] };
            level._.push({ [key]: object[key], [keys[key]]: level[object[key]]._ });
        }
        return level[object[key]];
    }, temp)._.push({ title: object.title, description: object.description });
});

console.log(result);

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

edited Jan 24, 2018 at 16:31

answered Jan 24, 2018 at 15:37

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

8 Comments

JC Garcia Over a year ago

The solution looks really neat, thanks! Also @Jamiec solution works perfect, now the only doubt would be which one is more efficient...

sjahan Over a year ago

@JCGarcia I would bet on this one, more native than using lodash. @Nina, is a Map better than using a simple object {}? Very nice solution btw!!

Nina Scholz Over a year ago

@sjahan, the object is maybe faster with a for loop.

Jamiec Over a year ago

I would personally always defer to Nina's better knowledge ;) Except that this doesnt do the second level of aggregation on sections

Nina Scholz Over a year ago

@Jamiec, sorry, haven't seen the nested grouping.

|

Collectives™ on Stack Overflow

Group array of object nesting some of the keys with specific names

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related