Create multiple object looping over array

Question

So i have an array which stores hobbies for each user in an array within the object..

var hobbies = [
  {
    "id": 1,
    "hobbies": []
  },

  {
    "id": 2,
    "hobbies": [
      "football"
    ]
  },
  {
    "id": 3,
    "hobbies": [
      "football",
      "basketball"
    ]
  }
]

What i want to return is a new array of objects but each hobby separated into their own object like below.

var result = [
  {
    "id": 2,
    "hobby": "football"
  },
 {
    "id": 3,
    "hobby": "football"
  },
 {
    "id": 3,
    "hobby": "basketball"
  }
]

What is have so far is

hobbies.filter((f, i) => f.hobbies.length > 0).map((p, i) => {
    while (i < p.hobbies.length) {
 return { id : p.id, hobby : p.hobbies[i] };
}
  });

which only returns

[
  {
    "id": 2,
    "hobby": "football"
  },
  {
    "id": 3,
    "hobby": "basketball"
  }
]

By the looks of it you are using a relational approach here. Why? Javascript is not a relational DB, no need to reference foreign ids. Just attach a hobbies property to each user object. — connexo
– connexo, Commented Mar 1, 2018 at 11:57

Hassan Imam · Accepted Answer · 2018-03-01 11:53:07Z

1

You can use array#reduce with array#map. Iterate through each object and then iterate through each hobby of hobbies and create the object.

var hobbies = [ { "id": 1, "hobbies": [] }, { "id": 2, "hobbies": [ "football" ] }, { "id": 3, "hobbies": [ "football", "basketball" ] } ],
    result = hobbies.reduce((r, {id, hobbies}) => r.concat(hobbies.map(hobby => ({id, hobby}))), []);
console.log(result);

answered Mar 1, 2018 at 11:53

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

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

1 Comment

Michaelh Over a year ago

This works well with what I was trying to achieve, thanks.

georg · Accepted Answer · 2018-03-01 11:58:32Z

1

I know, "functional" programming is considered "cool" around these parts, however, have you considered using simple loops to, well, loop over your data?

let result = [];

for (let {hobbies, id} of data)
    for (let hobby of hobbies)
        result.push({id, hobby})

In my opinion, this is far more readable than any reduce spaghetti one could come up with ;)

answered Mar 1, 2018 at 11:58

georg

216k57 gold badges324 silver badges401 bronze badges

Comments

31piy · Accepted Answer · 2018-03-01 11:53:04Z

0

You need to use inner-loop to loop through the hobbies and push them one-by-one to the target array:

var hobbies = [{
    "id": 1,
    "hobbies": []
  },

  {
    "id": 2,
    "hobbies": [
      "football"
    ]
  },
  {
    "id": 3,
    "hobbies": [
      "football",
      "basketball"
    ]
  }
];

var result = hobbies.reduce((acc, item) => {
  item.hobbies.forEach(hobby => {
    acc.push({
      id: item.id,
      hobby: hobby
    });
  });
  return acc;
}, []);

console.log(result);

answered Mar 1, 2018 at 11:53

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Comments

Faly · Accepted Answer · 2018-03-01 11:54:31Z

0

You can use array.prototype.reduce:

var hobbies = [{"id": 1,"hobbies": []},{"id": 2,"hobbies": ["football"]},{"id": 3, "hobbies": ["football","basketball"]}];

var res = hobbies.reduce((m, o) => (o.hobbies.forEach(h => m.push({id: o.id, hobby: h})), m), []);

console.log(res);

answered Mar 1, 2018 at 11:54

Faly

13.4k2 gold badges21 silver badges39 bronze badges

Comments

user1275105 · Accepted Answer · 2018-03-01 12:23:36Z

You need nested loops and this is the basics of it:

You first need to loop over the main hobbies array.

Then for each item in the array (which represents a person), you want to loop through their hobbies, and for each one of those hobbies, you need to push an object made up of the profile ID and the hobby into results array I created earlier.

var hobbies = [{ "id": 1, "hobbies": [] }, { "id": 2, "hobbies": [ "football" ] }, { "id": 3, "hobbies": [ "football", "basketball" ] } ];

let result = [];

hobbies.forEach(function(profile){
  profile.hobbies.forEach(function(hobby){
    result.push(
            {
        "id": profile.id,
        "hobby": hobby
      }
    );
  });
});

console.log(result)

Update: the other answers with Array.reduce (a more specialised loop) will cut the above code down even further.

Collectives™ on Stack Overflow

Create multiple object looping over array

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related