How to return a new array of object from object nested props with reduce in JavaScript

Question

I'm trying to return a new array of objects from the nested properties of another object. This is my current object:

const teams = {
  GRYFFINDOR: {
    display: 'Gryffindor',
    channel: ['#team-gryffindor'],
    ui: 'lion',
  },
  HUFFLEPLUFF: {
    display: 'Hufflepuff',
    channel: ['#team-hufflepuff'],
    ui: '', // empty string on purpose
  },
  SLYTHERIN: {
    display: 'Slytherin',
    channel: ['#team-slytherin'],
    ui: 'snake',
  },
}

Now, I'm trying to return an array of objects like so:

[
  { value: 'lion' },
  { value: '' },
  { value: 'snake' },
]

This is what I have tried:

const teamsUI = [Object.keys(teams).reduce((carry, item) => {
  return {...carry, ...{ ['value']: teams[item].ui  }}
}, {})];;

However, I get this:

console.log(teamsUI); // returns [ { value: 'snake' }]

What am I doing wrong?

[...Object.values(<obj>)].map(v => ({value: v.ui})) or alike should do — philipp
– philipp, Commented Mar 10, 2021 at 19:16

Guerric P · Accepted Answer · 2021-03-10 19:17:20Z

1

You could do like this:

const teams = {
  GRYFFINDOR: {
    display: 'Gryffindor',
    channel: ['#team-gryffindor'],
    ui: 'lion',
  },
  HUFFLEPLUFF: {
    display: 'Hufflepuff',
    channel: ['#team-hufflepuff'],
    ui: '', // empty string on purpose
  },
  SLYTHERIN: {
    display: 'Slytherin',
    channel: ['#team-slytherin'],
    ui: 'snake',
  },
}

const result = Object.values(teams).map(({ ui }) => ({ value: ui }));

console.log(result);

answered Mar 10, 2021 at 19:17

Guerric P

32k6 gold badges61 silver badges109 bronze badges

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

Comments

Nina Scholz · Accepted Answer · 2021-03-10 19:16:48Z

1

Beside nested result structure, you could take the values and destructure the wanted property formapping.

const
    teams = { GRYFFINDOR: { display: 'Gryffindor', channel: ['#team-gryffindor'], ui: 'lion' }, HUFFLEPLUFF: { display: 'Hufflepuff', channel: ['#team-hufflepuff'], ui: '' }, SLYTHERIN: { display: 'Slytherin', channel: ['#team-slytherin'], ui: 'snake' } },
    result = Object.values(teams).map(({ ui: value }) => ({ value }));
    
console.log(result);

answered Mar 10, 2021 at 19:16

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Comments

Cels · Accepted Answer · 2021-03-10 19:31:03Z

Here is the shortest way to achieve what you want

Object.keys(teams).map(t=>({value: teams[t].ui}))

Now what are you doing wrong?

Take a look at this part

Object.keys(teams).reduce((carry, item) => {
  return {...carry, ...{ ['value']: teams[item].ui  }}
}, {});

You're reducing your object to a single value with the same key called value. This means that the value of teams[item].ui of the current object in the reduce function will override the previous and hence you'll end up with the last object of that reduce function. You're finally wrapping this last object in an array which gives you what you have.

A better way to achieve that will be to do something like this

Object.keys(teams).reduce((carry, item, index)=>{
  carry[index] = { value: teams[item].ui };
  return carry;
}, []);

Collectives™ on Stack Overflow

How to return a new array of object from object nested props with reduce in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related