Meal Maker, TypeError: Cannot read property 'appetizers' of undefined

Hello, I am working on this Meal Maker project and having a bit of trouble. I have search the forum from people who encounter the same problem as me but i still cannot find the answer. Maybe there’s a typo somewhere or something in my code. I need some fresh eyes. Thank you in advance.

This is the link to the project:

Meal Maker Project

const menu = {
  _courses: {
    appetizers: [],
    mains: [],
    desserts: [],
  },
  get appetizers() {
    return this._courses.appetizers;
  },
  get mains() {
    return this._courses.mains;
  },
  get desserts() {
    return this._courses.desserts;
  },
  set appetizers(appetizers) {
    this._courses.appetizers = appetizers;
  },
  set mains(mains) {
    this._courses.mains = mains;
  },
  set desserts(desserts) {
    this._courses.desserts = desserts;
  },
  get courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse (courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice
    };
    return this._course[courseName].push(dish);
  },
  getRandomDishFromCourse(courseName) {
    const dishes = this._courses[courseName];
    const randomIndex = Math.floor(Math.random() * dishes.length);
    return dishes[randomIndex];
  },
  generatedRandomMeal() {
    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}, ${dessert.name} and the total price is ${totalPrice}.`;
  }
};

menu.addDishToCourse('appetizers', 'salad', 4.00);
menu.addDishToCourse('appetizers', 'wings', 5.00);
menu.addDishToCourse('appetizers', 'fries', 4.50);

menu.addDishToCourse('mains', 'steak', 12.00);
menu.addDishToCourse('mains', 'salmon', 18.00);
menu.addDishToCourse('mains', 'chicken shop', 10.00);

menu.addDishToCourse('desserts', 'ice cream', 2.00);
menu.addDishToCourse('desserts', 'coffee',3.00);
menu.addDishToCourse('desserts', 'cake', 4.00);

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


I even follow the video but still can’t find the answer.

this._course is undefined, given the property is called courses (plural)

side note: I personally dislike this aspect of Javascript, the language should have thrown an error along the lines of:

property _course does not exists on menu object

that would have been so much easier to debug

OMG THANK YOU SO MUCH!! I know it must something simple but i just can’t find it. Also i agree with your side note. Really hard especially for a beginner like me to understand error message and debugging.

1 Like

Hello! I got the same error on this project but I still cannot figure it out.

stetim94 answered above that this._course is undefined, given the property is called courses (plural)’ and I don’t get the meaning but that’s the point for my code too I think. Could somebody explain what is wrong with my code below? Thank you in advance!

const menu = {
  _courses : {
     appetizers: [],
     mains: [],
     desserts: [],
  },
  get appetizers() {
    return this._courses.appetizers;
     },
  get mains() {
    return this._courses.mains;
     },
  get desserts() {
      return this._courses.desserts;
     },
  set appetizers(appetizers) {
    this._courses.appetizers = appetizers;
  },
  set mains(mains) { 
    this._courses.mains = mains;
  },
  set desserts(desserts) {
    this._courses.desserts = desserts;
  },
  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._cources[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 `Your meal is ${appetizer.name}, ${main.name}, and  ${dessert.name}, and the total price is ${totalPrice}`;
 }
 };

 menu.addDishToCourse('mains', 'humberger','1200' );
 menu.addDishToCourse('mains', 'pasta','1000' );
 menu.addDishToCourse('mains', 'yakiniku-bowl','1200' );
 menu.addDishToCourse('mains', 'sushi','5000' );
 menu.addDishToCourse('mains', 'humberger','1200' ); 
 menu.addDishToCourse('desserts', 'ice','120' ); 
 menu.addDishToCourse('appetizers', 'cucumber','120' );
 menu.addDishToCourse('appetizers', 'salad','200' );

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

/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:41
const dishes = this._cources[courseName];
^
TypeError: Cannot read property ‘appetizers’ of undefined
at Object.getRandomDishFromCourse

within your getRandomDishFromCourse method you have this line:

    const dishes = this._cources[courseName];

you made a typo in courses (you wrote: cources).

its a different typo/grammar mistake then OP, but similar in nature

1 Like

Thank you for the quick response! I will do double-check of spellings next time!