Regroup array of objects based on nested array

Question

I have an Array of Object. Each Object contains another inner Array. I would like to take each inner array as outer object and put the remaining old outer elements as sub properties of newly created outer object.

Input

data = [
    {
      name: "Sam",
      ssn: 123,
      age: 25,
      hobbies: [{ name: "cricket" }, { name: "football" }]
    },
    {
      name: "John",
      ssn: 234,
      age: 25,
      hobbies: [{ name: "cricket" }, { name: "football" }]
    },
    {
      name: "Mathew",
      ssn: 345,
      age: 25,
      hobbies: [{ name: "cricket" }, { name: "football" }, {name: "carroms"}]
    }
  ];

Expected Output

[
      {
        name: "cricket",
        person_details: [
          { name: "Sam", ssn: 123, age: 25 },
          { name: "John", ssn: 234, age: 25 },
          { name: "Mathew", ssn: 345, age: 25 }
        ]
      },
      {
        name: "football",
        person_details: [
          { name: "Sam", ssn: 123, age: 25 },
          { name: "John", ssn: 234, age: 25 },
          { name: "Mathew", ssn: 345, age: 25 }
        ]
      },
      {
        name: "carroms",
        person_details: [          
          { name: "Mathew", ssn: 345, age: 25 }
        ]
      }
    ]

What i have tried using Reduce as follows

this.data = this.data.reduce(
  (a, x) => [...x.hobbies.map(h => ({ ...x, hobbies: [h] }))],
  []
);

Why are you putting hobbies: in the output? And why aren't you accessing h.name in the loop? — Barmar
– Barmar, Commented Mar 12, 2020 at 8:23
When I see code like that, I wonder if you were even trying, or you just threw something together randomly so we wouldn't close the question for not showing an attempt. — Barmar
– Barmar, Commented Mar 12, 2020 at 8:24
Hey man. i tried something and i dont have clear idea how we can simply achieve this by adding spread, arrow, es6 features. This can be done using multiple for loop easily but my intention here is to minimize the complexity and code. — Mithun S
– Mithun S, Commented Mar 12, 2020 at 8:29
Shortening the code using spread and reduce doesn't always mimimize complexity. Write it clearly. — Barmar
– Barmar, Commented Mar 12, 2020 at 8:35

Nina Scholz · Accepted Answer · 2020-03-12 08:26:00Z

2

You could reduce the array and look for same name items for the result set.

var data = [{ name: "Sam", ssn: 123, age: 25, hobbies: [{ name: "cricket" }, { name: "football" }] }, { name: "John", ssn: 234, age: 25, hobbies: [{ name: "cricket" }, { name: "football" }] }, { name: "Mathew", ssn: 345, age: 25, hobbies: [{ name: "cricket" }, { name: "football" }, { name: "carroms" }] }],
    result = data.reduce((r, { hobbies, ...o }) => {
        hobbies.forEach(({ name }) => {
            var group = r.find(q => q.name === name);
            if (!group) r.push(group = { name, person_details: [] });
            group.person_details.push(o);
        })
        return r;
    }, []);

console.log(result);

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

answered Mar 12, 2020 at 8:26

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

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

2 Comments

Mithun S Over a year ago

How will u learn these things? data.reduce((r, { hobbies, ...o }) these types of syntax are new to me.

Nina Scholz Over a year ago

you may have a look to destructuring and rest parameters .../spread syntax ....

Yevhen Horbunkov · Accepted Answer · 2020-03-12 09:26:29Z

2

Simple Array.prototype.reduce() teamed up with Array.prototype.forEach() to loop over the list of hobbies, together with destructuring assignment syntax may do the trick easily :

const data = [{name:"Sam",ssn:123,age:25,hobbies:[{name:"cricket"},{name:"football"}]},{name:"John",ssn:234,age:25,hobbies:[{name:"cricket"},{name:"football"}]},{name:"Mathew",ssn:345,age:25,hobbies:[{name:"cricket"},{name:"football"},{name:"carroms"}]}],
  
      result = data.reduce((r,{hobbies, ...userData}) => (
        hobbies.forEach(({name}) => (
          match = r.find(({hobby}) => hobby == name),
          match ?
          match['person_details'].push({...userData}) :
          r.push({hobby:name, person_details: [{...userData}]})
        ))
     , r), [])

console.log(result)

.as-console-wrapper{min-height:100%;}

edited Mar 12, 2020 at 9:26

answered Mar 12, 2020 at 8:29

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

1 Comment

yunzen Over a year ago

The output should be an array, not an object

CertainPerformance · Accepted Answer · 2020-03-12 08:22:38Z

Create an object indexed the hobby instead. When iterating over the people, create a new object with a name and person_details array if it doesn't exist yet, and then push to the person_details array:

const data = [
  {
    name: "Sam",
    ssn: 123,
    age: 25,
    hobbies: [{ name: "cricket" }, { name: "football" }]
  },
  {
    name: "John",
    ssn: 234,
    age: 25,
    hobbies: [{ name: "cricket" }, { name: "football" }]
  },
  {
    name: "Mathew",
    ssn: 345,
    age: 25,
    hobbies: [{ name: "cricket" }, { name: "football" }, {name: "carroms"}]
  }
];
const peopleByHobbies = {};
for (const { hobbies, ...personData } of data) {
  for (const { name } of hobbies) {
    if (!peopleByHobbies[name]) peopleByHobbies[name] = { name, person_details: [] };
    peopleByHobbies[name].person_details.push({ ...personData });
  }
}
const output = Object.values(peopleByHobbies);
console.log(output);

reduce is arguably not the right tool to use for this sort of thing, but if you want to use it:

const data = [
  {
    name: "Sam",
    ssn: 123,
    age: 25,
    hobbies: [{ name: "cricket" }, { name: "football" }]
  },
  {
    name: "John",
    ssn: 234,
    age: 25,
    hobbies: [{ name: "cricket" }, { name: "football" }]
  },
  {
    name: "Mathew",
    ssn: 345,
    age: 25,
    hobbies: [{ name: "cricket" }, { name: "football" }, {name: "carroms"}]
  }
];
const peopleByHobbies = data.reduce((peopleByHobbies, { hobbies, ...personData }) => {
  for (const { name } of hobbies) {
    if (!peopleByHobbies[name]) peopleByHobbies[name] = { name, person_details: [] };
    peopleByHobbies[name].person_details.push({ ...personData });
  }
  return peopleByHobbies;
}, {});
const output = Object.values(peopleByHobbies);
console.log(output);

prasanth · Accepted Answer · 2020-03-12 08:40:03Z

0

Using Array#reduce .you could pass the object on each iteration using Spread operator like this {hobbies,...b}

const arr = [{ name: "Sam", ssn: 123, age: 25, hobbies: [{ name: "cricket" }, { name: "football" }] }, { name: "John", ssn: 234, age: 25, hobbies: [{ name: "cricket" }, { name: "football" }] }, { name: "Mathew", ssn: 345, age: 25, hobbies: [{ name: "cricket" }, { name: "football" }, { name: "carroms" }] } ];

const res = arr.reduce((acc, {hobbies,...b}) => {
            hobbies.forEach(i => {
              acc[i.name] = acc[i.name] || {
                name: i.name,
                persional_details: []
              };
            acc[i.name].persional_details.push(b)
        })
        return acc
      }, {});

console.log(Object.values(res))

edited Mar 12, 2020 at 8:40

answered Mar 12, 2020 at 8:32

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Collectives™ on Stack Overflow

Regroup array of objects based on nested array

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related