How would you change values/add to nested object data inside array of objects using Javascript?

Question

const beers = [
  {
    id: '100',
    name: 'stoneys'
  },
  {
    id: '200',
    name: 'budweiser'
  },

  {
    id: '300',
    name: 'miller'
  },

  {
    id: '400',
    name: 'corona'
  }
];

const people = [
  {
    name: 'steve',
    teams: [
      {
        name: 'pirates',
        beers: ['100']
      },
      {
        name: 'penguins',
        beers: ['300']
      }
    ]
  },
  {
    name: 'jim',
    teams: [
      {
        name: 'indians',
        beers: ['200']
      },
      {
        name: 'blue jackets',
        beers: ['100', '400']
      }
    ]
  }
];

let newPeople = people.map(fan => {
  fan.teams.map(team => {
    team.beers.map(beer => beers.filter(brand => brand.id === beer)[0])
  });
});

Above is a sample I put together to best demonstrate my question. I am having trouble understanding why nested mapping (.map()) of object arrays is not allowing me to alter the nested data. When I console log results, I am either getting an "[undefined, undefined]' or the unchanged "people" array.

I would like to return the same array as "people" except replace the nested "beers" array (people.teams.beers[]) with corresponding objects from the "beers" array. Example of a successful result below:

 {
    name: 'steve',
    teams: [
      {
        name: 'pirates',
        beers: [
          {
            id: '100',
            name: 'stoneys'
          }
        ]
      },
      {
        name: 'penguins',
        beers: [
          {
            id: '300',
            name: 'miller'
          }
        ]
      }
    ]
  }

map returns the mapped result ... you don't do anything with it — Jaromanda X
– Jaromanda X, Commented Apr 14, 2020 at 23:11
@terrymorse - OP's code is in the first code block at the bottom — Jaromanda X
– Jaromanda X, Commented Apr 14, 2020 at 23:12

mickl · Accepted Answer · 2020-04-14 23:14:42Z

1

Array.map expects a function which takes single array element as parameter and returns a mapped value. In your case you're not returning any value from mapping functions therefore you're getting undefined twice

const beers = [
  {
    id: '100',
    name: 'stoneys'
  },
  {
    id: '200',
    name: 'budweiser'
  },

  {
    id: '300',
    name: 'miller'
  },

  {
    id: '400',
    name: 'corona'
  }
];

const people = [
  {
    name: 'steve',
    teams: [
      {
        name: 'pirates',
        beers: ['100']
      },
      {
        name: 'penguins',
        beers: ['300']
      }
    ]
  },
  {
    name: 'jim',
    teams: [
      {
        name: 'indians',
        beers: ['200']
      },
      {
        name: 'blue jackets',
        beers: ['100', '400']
      }
    ]
  }
];

let newPeople = people.map(fan => {
  let teams = fan.teams.map(team => {
     let beer = team.beers.map(beer => beers.filter(brand => brand.id === beer)[0]);
     return { name: team.name, beers: beer }
  });
  return { name: fan.name, teams: teams }
});

console.log(newPeople);

answered Apr 14, 2020 at 23:14

mickl

50.1k9 gold badges71 silver badges99 bronze badges

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

2 Comments

Nick Soltis Over a year ago

This works perfectly for me! Thank you! Now, is there a way to make the returned objects dynamic so I don't have to individually manage the key-value pairings in each returned object if I add or remove a field from the original object array? I tried using Object.assign(), however, I could not successfully return the correct objects.

mickl Over a year ago

Can you open another question to avoid editing this one?

Collectives™ on Stack Overflow

How would you change values/add to nested object data inside array of objects using Javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related