.push() Undefined in Meal Maker Project

Get Help JavaScript
,
#1

I’m tackling the Meal Maker project in the Intro to Javascript course and I cannot figure out why I keep getting the following error: “TypeError: Cannot read property ‘push’ of undefined at Object.addDishToCourse”. I’ve checked for spelling, commas, and other possible errors, but I can’t find anything. Here is my code:

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.appetizers;
    },
    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._courses[courseName];
    const randomIndex = Math.floor(Math.random() * dishes.length);
    return 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 will begin with ${appetizer.name} followed by our main course of ${main.name}, and your meal will conclude with ${dessert.name} prepared to order. The meal will be ${totalPrice} dollars in total. Thank you and have a wonderful evening.`
  }
};

menu.addDishToCourse('appetizers', 'spring rolls', 7);
menu.addDishToCourse('appetizers', 'cheese plate', 10);
menu.addDishToCourse('appetizers', 'kalamari', 9);
menu.addDishToCourse('mains', 'braised quail', 20);
menu.addDishToCourse('mains', 'poached salmon', 25);
menu.addDishToCourse('mains', 'fennel bulb and peccorino quiche', 17);
menu.addDishToCourse('desserts', 'flourless chocolate cake', 10);
menu.addDishToCourse('desserts', 'pineapple flan', 11);
menu.addDishToCourse('desserts', 'créme bruleé', 12);

Thank you! The link to the project is below. :slightly_smiling_face:

https://www.codecademy.com/courses/introduction-to-javascript/projects/meal-maker

#2

This error means you get undefined here:

    return this._courses[courseName].push(dish);

which means: the property exists has an undefined value or the property does not exist at all

so we we could add a log:

  addDishToCourse (courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice
    };
    console.log(this._courses, courseName);
    return this._courses[courseName].push(dish);

which gives us:

[object Object] {
  appetizers: undefined,
  desserts: undefined,
  mains: undefined
}
"appetizers"

well, that explains a lot

This problem is caused by several of your getters. First your courses getter:

  get _courses() {
    console.log(Object.keys(this))
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    };

I log the available properties/keys for menu object (this). As you can see, now appetizers, mains and desserts properties.

You need to debug your getters :slight_smile:

1 Like
#3

Thank you for your quick response! You laid out a great way to do some detective work to figure out where the problem is too. I found that I was missing a closing curly brace for my _courses object :crazy_face:, and then I incorrectly typed the getter for the _courses object with the underscore so it was “get _courses” instead of “get courses”. After fixing these two things the code ran successfully. Hurray for debugging :sunglasses:

I sincerely appreciate your help!

1 Like