Help with Meal Maker's project

I was doing the Meal Maker project in Introduction too Javascript and I got stuck.

This is the code:

const menu = {
  _courses: {
    appetizers: [],
    get appetizers() {
      
    },
    set appetizers(appetizerIn) {
      
    },
    mains: [],
    get mains() {
      
    },
    set mains(mainsIn) {
      
    },
    desserts: [],
    get desserts() {
      
    },
    set desserts(dessertsIn) {
      
    },
    
  },
  get courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {
      name: this.dishName,
      price: this.dishPrice
    };
      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("dessert")
    const totalPrice = appetizer.price + main.price + dessert.price
    
    return `Your meal consists of ${appetizer.name}, ${main.name} and ${dessert.name}. It costs $${totalPrice}`
  }
};

menu.addDishToCourse("appetizers", "Pan y picos", 1)
menu.addDishToCourse("appetizers", "Olives", 1)
menu.addDishToCourse("appetizers", "Chicken Pops", 2)

menu.addDishToCourse("mains", "001", 1)
menu.addDishToCourse("mains", "021", 1.2)
menu.addDishToCourse("mains", "099", 2)

menu.addDishToCourse("desserts", "Flan", 2)
menu.addDishToCourse("desserts", "Tarta de queso", 3)
menu.addDishToCourse("desserts", "Tarta de la abuela", 2)

I got this error:

/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:38
this._courses[courseName].push(dish);
^

TypeError: Cannot read property ‘push’ of undefined
at Object.addDishToCourse (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:38:32)
at Object. (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:55:6)
at Module._compile (module.js:571:32)
at Object.Module._extensions…js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.runMain (module.js:605:10)
at run (bootstrap_node.js:427:7)
at startup (bootstrap_node.js:151:9)

How can I solve it?

Perhaps you should apply some console.logs to find out why

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

Produces an error. It is telling you it can’t push something that is undefined.

1 Like

I eliminated the this.dishName and the this.dishPrice and console.loging it logs something. But dish is still undefined?

Have you logged: this._courses, courseName and this.courses[courseName]? This are the most logic variable to log, this should give you insight which course name is not in courses object

1 Like

Have you tried logging dishName and dishPrice inside the addDishToCourse method?

1 Like

I’ve logged dishName, dishPrice, this._courses, courseName, this._courses.appetizers and this._courses[courseName].

dish, dishName, dishPrice, and courseName seem good.

this._courses seems good too, but this._courses.appetizers and this._courses[courseName] not.

This is my code now:

const menu = {
  _courses: {
    appetizers: [],
    get appetizers() {
      
    },
    set appetizers(appetizerIn) {
      
    },
    mains: [],
    get mains() {
      
    },
    set mains(mainsIn) {
      
    },
    desserts: [],
    get desserts() {
      
    },
    set desserts(dessertsIn) {
      
    },
    
  },
  get courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice
    };
    console.log(dishName)
    console.log(dishPrice)
    console.log(dish)
    console.log(this._courses)
    console.log(courseName)
    console.log(this._courses['appetizers'])
    console.log(this._courses[courseName])
    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 `Your meal consists of ${appetizer.name}, ${main.name} and ${dessert.name}. It costs $${totalPrice}`
  }
};

menu.addDishToCourse("appetizers", "Pan y picos", 1)
menu.addDishToCourse("appetizers", "Olives", 1)
menu.addDishToCourse("appetizers", "Chicken Pops", 2)

menu.addDishToCourse("mains", "001", 1)
menu.addDishToCourse("mains", "021", 1.2)
menu.addDishToCourse("mains", "099", 2)

menu.addDishToCourse("desserts", "Flan", 2)
menu.addDishToCourse("desserts", "Tarta de queso", 3)
menu.addDishToCourse("desserts", "Tarta de la abuela", 2)

this log:

console.log(this._courses['appetizers'])

gives undefined. So where does this undefined come from? Could it be the getter? Seems plausible. Lets add a log to the getter:

    get appetizers() {
      console.log('get here');
    },

ah, so that learns us that the getter gives undefined. How could that be?

1 Like

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.