'Meal Maker' project cannot read property 'price' of undefined

Get Help JavaScript
,
#1

Hi! This is the ‘Meal Maker’ project. I’m not sure what is causing the error. Anything helps, thanks!!

const menu = {
  _courses: {
      appetizers: [],
      mains: [],
      desserts: [],
  },
  get appetizers() {
    return this._courses.appetizers;
  },
  get mains() {
    return this._courses.main;
  },
  get desserts() {
    return this._courses.desserts;
  },
  set appetizers(appetizerIn) {
    return this._courses.appetizers = appetizerIn;
  },
  set mains(mainIn) {
    return this._courses.mains = mainIn;
  },
  set desserts(dessertIn) {
    return this._courses.desserts = dessertIn;
  },
  get courses() {
   return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    };
  },
addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice,
    };
    return this._courses[courseName].push(dish);
},
getRandomDishFromCourse(courseName) {
  const dishes = this._courses[courseName];
  const randomIndex = Math.floor(Math.random * dishes.length);
  return dishes[randomIndex];
},

generateRandomMeal() {
  const appetizer = this.getRandomDishFromCourse("appetizers");
  const main = this.getRandomDishFromCourse("mains");
  const dessert = this.getRandomDishFromCourse("desserts");
  const totalPrice = appetizer.price + main.price + dessert.price;
  return `With the ${appetizer.name}, the ${main.name}, and the ${dessert.name} the total price is ${totalPrice}. `;
}
};


menu.addDishToCourse('appetizers', '1', 10);
menu.addDishToCourse('appetizers', '2', 9);
menu.addDishToCourse('appetizers', '3', 8);

menu.addDishToCourse('mains', '4', 10);
menu.addDishToCourse('mains', '5', 10);
menu.addDishToCourse('mains', '6', 10);

menu.addDishToCourse('desserts', '7', 10);
menu.addDishToCourse('desserts', '8', 10);
menu.addDishToCourse('desserts', '9', 10);


const meal = menu.generateRandomMeal();
console.log(meal);

been looking this over. can’t seem to find the what is wrong…

keep getting: 'TypeError: Cannot read property ‘price’ of undefined
at Object.generateRandomMeal ’

p.s. was just to lazy to put in dish names

2 Likes
#2

Your problem is actually quite a simple one. Your entire code is perfect apart from one little snag! In getRandomDishFromCourse() if you do some console.log 's then you’ll find that your randomIndex is outputting NaN. The reason is that you’ve written Math.random, when it should be Math.random() as random() is a method in the class Math. Add these brackets and everything should work as expected.

1 Like
#3

:smile: wow. That makes sense. I suppose I just anxiously overlooked it. Thank you so much for your help!

1 Like
#4

It happens, 50% of coding is just double checking you’ve got all the brackets closed!

#5

I was about to create my own post when I stumbled onto this one. After seeing the author’s code i saw that my issue was that I did not return dishes at the random index inside the ‘getRandomDishFromCourse’ method. I fixed that but now I have a new problem. My code only works sometimes. I also cannot tell what is wrong:

const menu = {
  _courses: {
    appetizers: [],
    mains: [],
    desserts: []
  },
  get appetizers () {
    return this._courses.appetizers;
  },
  set appetizers (appetizers) {
this._courses.appetizers = appetizers;
  },
  get mains () {
    return this._courses.mains;
  },
  set mains (mains) {
this._courses.mains = mains;
  },
  get desserts () {
    return this._courses.desserts;
  },
  set desserts (desserts) {
this._courses.desserets = desserts;
  },
 get courses () {
   return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
      };
 },
 addDishToCourse (courseName, dishName, dishPrice) {
   const dish = {
     name: dishName,
     price: dishPrice
   };
   this._courses[courseName].push(dish);
 },
 getRandomDishFromCourse (courseName) {
   const dishes = this._courses[courseName];
   const rnd = Math.round(Math.random() * dishes.length);

   return dishes[rnd];
 },
 generateRandomMeal() {
   const appetizer = this.getRandomDishFromCourse('appetizers');
   const main = this.getRandomDishFromCourse('mains');
   const dessert = this.getRandomDishFromCourse('desserts');
   const totalPrice = appetizer.price + main.price + dessert.price;

   return `Your meal is ${appetizer.name}, ${main.name}, and ${dessert.name}. The total comes out to ${totalPrice}`;
 }
};

menu.addDishToCourse('appetizers', 'Garlic Bread', 3.25);
menu.addDishToCourse('appetizers', 'Greek Salad', 4.25);
menu.addDishToCourse('appetizers', 'Jalepeno Poppers', 4.75);
menu.addDishToCourse('appetizers', 'Sweet Potato Fries', 5.00);
menu.addDishToCourse('mains', 'Chicken Alfredo', 8.75);
menu.addDishToCourse('mains', 'Philly Cheesesteak Sandwich', 7.25);
menu.addDishToCourse('mains', '2 lbs Chicken Wings', 12.25);
menu.addDishToCourse('mains', 'Full Rack Ribs', 22.25);
menu.addDishToCourse('desserts', 'Fruit Salad', 3.75);
menu.addDishToCourse('desserts', 'Banana Split Sundae', 4.25);
menu.addDishToCourse('desserts', 'Peach Cobbler with Ice Cream', 4.75);
menu.addDishToCourse('desserts', 'Cheesecake', 5.00);

let meal = menu.generateRandomMeal();
console.log(meal);

Can anyone please help? Thanks.

#6

I solved it. I changed Math.round to Math.floor. For some reason it does not like the former.

#7

The reason is that rnd is your index, and as such it needs to return a number that can be a valid index. If dishes.length = 3 say, then rnd will take a value between 0 and 3 not including 3. The index values for dishes are 0, 1 and 2. Therefore, if rnd > 2.5 which is entirely possible, then Math.round(rnd) will be set to 3, which is not a valid index of dishes and will return an error. This is why Math.floor() is used, as This ensures the only possible values are 0, 1 and 2.

1 Like
#8

It’s been almost 24 hours of retracing the tutorial video and I couldn’t get it until this. Thank you Adam, you are an angel

1 Like