JavaScript Array like object .map()

Question

Hello I want to switch the ranking and cereal of my array around using the .map, however I am getting an undefined to the console.log. Based on the awesome feedback I was able to get everything working, however I am still a bit confused about something. For I am not sure how to match the cereal up with the ranking in reverse order? I am totally stumped.

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(function(bFood){
 return breakFastFood.cereal
});

var rank = breakFastFood.map(function(standing){
 return breakFastFood.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

What do you mean by how to match the cereal up with the ranking in reverse order? — Mamun
– Mamun, Commented Mar 7, 2019 at 6:25

Mamun · Accepted Answer · 2019-03-07 05:02:34Z

You are not using the function parameter in the return statement:

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(function(bFood){
 return bFood.cereal
});

var rank = breakFastFood.map(function(standing){
 return standing.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

You can also use short hand property:

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(({cereal}) => cereal);

var rank = breakFastFood.map(({scale}) => scale);

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

Shidersz · Accepted Answer · 2019-03-07 05:13:33Z

You are not using the arguments of the Array.map() callback functions:

var breakFastFood =[
  {cereal: "Captain Crunch", scale: "Yuck!"},
  {cereal: "Grape Nuts", scale: "Yum!"},
  {cereal: "Fruity Pebbles", scale: "Yuck!"},
  {cereal: "Oatmeal", scale: "Yum!"}
];

var cereals = breakFastFood.map(function(bFood)
{
    return bFood.cereal;
});

var rank = breakFastFood.map(function(standing)
{
    return standing.scale;
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

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

Note, you can also get the same result, iterating only once on the array of objects:

var breakFastFood = [
  {cereal: "Captain Crunch", scale: "Yuck!"},
  {cereal: "Grape Nuts", scale: "Yum!"},
  {cereal: "Fruity Pebbles", scale: "Yuck!"},
  {cereal: "Oatmeal", scale: "Yum!"}
];

var cereals = [], rank = [];

breakFastFood.forEach(
    ({cereal, scale}) => (cereals.push(cereal), rank.push(scale))
);

rank.forEach((rating) => console.log(rating));
cereals.forEach((food) => console.log(food));

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

Code Maniac · Accepted Answer · 2019-03-07 04:58:09Z

0

You're accessing the arguments incorrectly

var breakFastFood =[{cereal: "Captain Crunch",scale: "Yuck!"},{cereal: "Grape Nuts",scale: "Yum!"},{cereal: "Fruity Pebbles",scale: "Yuck!"},{cereal: "Oatmeal",scale: "Yum!"}];

var cereals = breakFastFood.map(function(bFood){
 return bFood.cereal
});

var rank = breakFastFood.map(function(standing){
 return standing.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

answered Mar 7, 2019 at 4:58

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Comments

Amardeep Bhowmick · Accepted Answer · 2019-03-07 05:09:58Z

0

You are looking for the cereal and scale property on the breakFastFood array instead of on the individual objects passed in the Array.map call back.

var breakFastFood = [{"cereal":"Captain Crunch","scale":"Yuck!"},{"cereal":"Grape Nuts","scale":"Yum!"},{"cereal":"Fruity Pebbles","scale":"Yuck!"},{"cereal":"Oatmeal","scale":"Yum!"}];
var cereals = breakFastFood.map(function(bFood) { return bFood.cereal; });

var rank = breakFastFood.map(function(standing) { return standing.scale;});

rank.forEach(rating => console.log(rating));
cereals.forEach(food => console.log(food));

Your code can be further simplified to use arrow functions => and destructuring assignment:

const breakFastFood = [{"cereal":"Captain Crunch","scale":"Yuck!"},{"cereal":"Grape Nuts","scale":"Yum!"},{"cereal":"Fruity Pebbles","scale":"Yuck!"},{"cereal":"Oatmeal","scale":"Yum!"}];
const cereals = breakFastFood.map(({cereal}) => cereal);

const rank = breakFastFood.map(({scale}) => scale);

rank.forEach(rating => console.log(rating));
cereals.forEach(food => console.log(food));

edited Mar 7, 2019 at 5:09

answered Mar 7, 2019 at 4:59

Amardeep Bhowmick

17k3 gold badges33 silver badges46 bronze badges

3 Comments

binarie Over a year ago

Perfect. Thanks

Amardeep Bhowmick Over a year ago

@binarie glad I could help out!

binarie Over a year ago

Gang, I made a mistake. How do I match up the cereal with the ranking. For example instead of captain crunch, next line yuk. I would like it to say "Yuck (next line) Captain Crunch. I am sorry for my mistake. I am stumped.

Oleg Agafonov · Accepted Answer · 2019-03-07 05:15:12Z

0

You have mistakes in your code. The map function accept current value as argument so you had to rewrite your code like this:

var cereals = breakFastFood.map(function(bFood){
 return bFood.cereal
});
var rank = breakFastFood.map(function(standing){
 return standing.scale
});

It is means that bFool is the current item in mapped array and you can get it properties in function body. But I think that the best way is to using good argument name like this

var rank = breakFastFood.map(function(breakFastFoodItem){
 return breakFastFoodItem.scale
});

or this

var rank = breakFastFood.map(function(item){
 return item.scale
});

answered Mar 7, 2019 at 5:15

Oleg Agafonov

12 bronze badges

Comments

Akhil Aravind · Accepted Answer · 2019-03-07 05:17:33Z

0

You should use
return bFood.cereal instead of return breakFastFood .cereal and return standing.scale instead of breakFastFood.scale

var breakFastFood =[
  {
     cereal: "Captain Crunch",
     scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

 },
 {
  cereal: "Fruity Pebbles",
  scale: "Yuck!"

},
{
  cereal: "Oatmeal",
  scale: "Yum!"

}
];
var cereals = breakFastFood.map(function(bFood){
 return bFood.cereal
   });


var rank = breakFastFood.map(function(standing){
 return standing.scale
});

rank.forEach(function(rating){console.log(rating)});
cereals.forEach(function(food){console.log(food)});

answered Mar 7, 2019 at 5:17

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Comments

Aniket G · Accepted Answer · 2019-03-07 15:27:30Z

0

You were accessing the arguments correctly. Also (an extension to all the other answers), you could farther simplify this code using shorthand notation.

bFood => bFood.cereal is the same thing as

function(bFood) {
  return bFood.cereal;
}

And rating => console.log(rating) is the same thing as

function(rating) {
  console.log(rating);
}

These are called Arrow Functions. You can find out more about them here.

var breakFastFood = [{
    cereal: "Captain Crunch",
    scale: "Yuck!"

  },
  {
    cereal: "Grape Nuts",
    scale: "Yum!"

  },
  {
    cereal: "Fruity Pebbles",
    scale: "Yuck!"

  },
  {
    cereal: "Oatmeal",
    scale: "Yum!"

  }
];

var cereals = breakFastFood.map(bFood => bFood.cereal);

var rank = breakFastFood.map(standing => standing.scale);

for (let i = 0; i < cereals.length; i++) {
  console.log(rank[i]);
  console.log(cereals[i]);
}

edited Mar 7, 2019 at 15:27

answered Mar 7, 2019 at 5:00

Aniket G

3,5321 gold badge16 silver badges43 bronze badges

2 Comments

binarie Over a year ago

Thanks everyone for your help! This has really made a huge difference. I really appreciate it.

binarie Over a year ago

Gang, I made a mistake. How do I match up the cereal with the ranking. For example instead of captain crunch, next line yuk. I would like it to say "Yuck (next line) Captain Crunch. I am sorry for my mistake.

Collectives™ on Stack Overflow

JavaScript Array like object .map()

7 Answers 7

Comments

Comments

Comments

3 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related