*Answered* Meal Maker Project - TypeError: Cannot read property 'price' of undefined

Hello there. Pretty new to JS and I’ve now spent way too long trying to figure out what’s going wrong here. I’ve gone through several times checking my spelling and even matching my code to the videos. And yet I’m sure I’m missing something really dumb right in front of my face.

here is the project: https://www.codecademy.com/courses/introduction-to-javascript/projects/meal-maker

The error I am getting:
/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:51
const totalPrice = appetizers.price + main.price + dessert.price;
^

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

(A note about my code: I have some organizational notes commented out just to help me keep nested elements straight in my head)https://gist.github.com/aef1fe20341ad2895038b2c2b398852b
here is my code:

const menu = {
  _courses: {
    appetizers: [],
    mains: [],
    desserts: [],
  }, //_courses end
  get appetizers (){
    return this._course.appetizers;
  },
    get mains (){
    return this._course.mains;
  },
  get desserts (){
    return this._course.desserts;
  },
  set appetizers(appetizerIn){
    this._courses.appetizers = appetizerIn
  },
  set mains(mainIn){
    this._courses.mains = mainIn
  },
  set desserts(dessertIn){
    this._courses.desserts = dessertIn
  },
  get courses(){
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts,
    }
  },//courses getter end 
  addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice,
    };
     return this._courses[courseName].push(dish);
  }, //add dish end

  getRandomDishFromCourse(courseName){
    const dishes = this._courses[courseName]
    const randomIndex = Math.floor(Math.floor()*dishes.length);
    return dishes[randomIndex];
  },//end of randomdish

  generateRandomMeal(){
    const appetizers = this.getRandomDishFromCourse('appetizers')
    const main = this.getRandomDishFromCourse('mains')
    const dessert = this.getRandomDishFromCourse('desserts')
    const totalPrice = appetizers.price + main.price + dessert.price;
    return `You should try this meal ${appetizers.name}, ${main.name}, ${dessert.name}. It only costs: ${totalPrice}`;
  }
}; //menu end

menu.addDishToCourse('appetizers', 'breadsticks', 6.50);
menu.addDishToCourse('appetizers', 'salad', 4.00)
menu.addDishToCourse('appetizers', 'cheese sticks', 9.00)

menu.addDishToCourse('mains', 'steak', 18.00)
menu.addDishToCourse('mains', 'chicken', 12.00)
menu.addDishToCourse('mains', 'fish', 16.00)

menu.addDishToCourse('desserts', 'cheescake', 11.00)
menu.addDishToCourse('desserts', 'ice cream', 1.00)
menu.addDishToCourse('desserts', 'brownie', 9.00)

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

here:

const appetizers = this.getRandomDishFromCourse('appetizers')

appetizers seems to be undefined. Which might indicate a problem with your getRandomDishFromCourse method, so, lets have a look:

  getRandomDishFromCourse(courseName){
    const dishes = this._courses[courseName]
    const randomIndex = Math.floor(Math.floor()*dishes.length);
    console.log(dishes, randomIndex);
    return dishes[randomIndex];
  },//end of randomdish

I use .log() to inspect the state of your program, where I can see that randomIndex is NaN (not a number). using NaN as an index seems to give undefined. In my opinion, JavaScript should throw an error. We are doing an illegal operation. But no, JavaScript just fails silently, resulting in error further down the line. Making it more difficult to find the actual bug. Okay, end of JavaScript rant.

looking at your attempt to generate a random number:

const randomIndex = Math.floor(Math.floor()*dishes.length);

I see a problem, do you see it to?

I have never been a fan of this approach (following the video), it doesn’t teach you to debug on your own.

1 Like

Big long sigh

Thank you! I knew it would be something ridiculous like that. And after hours of staring at the same code and researching absolutely everything I could think of, I think my eyes were just blurring everything together.

I’m going into a bootcamp next week and I’m cramming this week to be as prepared as I can. I have to say that missing little things like spelling and misplaced ;'s are probably my number one weakness right now.

Thank you so much for the help!

I also hope you learned something from my answer about debugging. And using .log() is one way, we can also use a debug tool:

Python Tutor - Visualize Python, Java, JavaScript, C, C++, Ruby code execution

which allows us to step through your code. Or in the case of javascript, you can also use your browser console to set breakpoints and inspect the state of your program

That will get better, at least, that is my personal experience. Good luck with your bootcamp! :slight_smile: