Meal Maker Project

For some reason, whenever I run my program, I get an error, and I can’t figure out where I went wrong. Here is my code:

const menu = {
  _courses : {
    appetizers: [],
    mains: [],
    desserts: []
  },
  get appetizers(){},
  set appetizers(appetizerIn){},

  get mains(){},
  set mains(mainsIn){},

  get desserts(){},
  set desserts(dessertIn){},

  get _courses(){
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse (courseName,dishName,dishPrice) {
    const dish = {dishName : 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 = menu.getRandomDishFromCourse('appetizer');
    const main = menu.getRandomDishFromCourse('mains');
    const dessert = menu.getRandomDishFromCourse('desserts');
    const totalPrice = (appetizer.price + main.price + dessert.price);
    return `Your meal is ${appetizer.name},${main.name}, and ${dessert.name}. The price is ${totalPrice}.`;
  }
};
menu.addDishToCourse('appetizers','french fries', 7);

And this is my error:
/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:25
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:25:30)
at Object. (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:40: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)

you could start by logging the variables used:

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

that should give some insight.

now we can start the trace, appetizers is undefined. Where does that come from? this_courses calls the getters. So lets look there:

  get _courses(){
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },

this.appetizers is the getter, but your getter doesn’t return anything resulting in undefined.

1 Like

I added the console.log statement, but I still don’t understand what the problem is. The same error statement persists. Here is my updated code:

const menu = {
  _courses : {
    appetizers: [],
    mains: [],
    desserts: []
  },
  get appetizers(){},
  set appetizers(appetizerIn){},

  get mains(){},
  set mains(mainsIn){},

  get desserts(){},
  set desserts(dessertIn){},

  get _courses(){
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse (courseName,dishName,dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice,
    };
    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 = menu.getRandomDishFromCourse('appetizer');
    const main = menu.getRandomDishFromCourse('mains');
    const dessert = menu.getRandomDishFromCourse('desserts');
    const totalPrice = (appetizer.price + main.price + dessert.price);
    return `Your meal is ${appetizer.name},${main.name}, and ${dessert.name}. The price is ${totalPrice}.`;
  }
};
menu.addDishToCourse('appetizers','french fries', 7);

And here is the console:
{ appetizers: undefined, mains: undefined, desserts: undefined } ‘appetizers’
/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:29
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:29:30)
at Object. (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:44: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)

Please help.

the log is the first step in the debug process. Its not the solution/fix

I did some further explanation, did you follow through with that? To see where the undefineds come from? You could use additional .logs() if you have too

The problem here is the instructions and the hint for Getters and Setters does not have alot of detail and assumes the person would know what to do.

If you copy the hint directly (if you get stuck) you will have essentially empty Getter and Setter methods that do nothing and return undefined values.

The hint at least needs more helpful information because as it stands it causes more confusion.

You need to point (to Get) them or set to something.

  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;
  },

Bottom left of the screen is a Get Help button, which folds the screen out and there is a link to a video of the project walkthrough.

Maybe these walkthoughs should not be tucked away because I have seen a lot problems posted that need not have been because the solutions (if you get stuck) are there, but out of sight.