Project Meal Maker

https://www.codecademy.com/paths/web-development/tracks/web-dev-js-arrays-loops-objects/modules/learn-javascript-objects/projects/meal-maker

Hi all, I keep running into the following error I cannot seem to figure out what I’m doing wrong, even in watching the get help video I’m still getting the same error. Any help would be appreciated

The error reads as follows.
"maker/app.js:37
return this._courses[courseName].push(dish); ^

TypeError: Cannot read property ‘push’ of undefined

1 Like

Lines 57 to 59, you call your .addDishToCourse with 'Mains', but in courses you have it as mains. Try changing that and see if you get any other bugs

Thanks for your input, unfortunately that didn’t do it, I’m so stumped on this one.

Try adding a console.log statement to your addDishToCourse method to see the value you are passing as an argument for the courseName parameter:

 addDishToCourse(courseName, dishName, dishPrice) {
   console.log(courseName) // what does this print? Do you have a key in your menu._courses object with the same name?
   const dish = {
     name: dishName,
     price: dishPrice
   };
 return this._courses[courseName].push(dish);

You can try to make sure the underscores in getters and setters matches the object. Right now your getters and setters only have underscore on the _courses. I think you also need it on the appetizers/mains/desserts in order to match the object containing the arrays or you could remove the underscore from the appetizers/mains/desserts arrays to achieve the same result.

The error is indicating that this._courses[courseName] is undefined, not an array type. Why is it undefined?

First lets look at what you are passing into the function, what courseName is, and as pointed out before:

With that corrected it is still undefined and throwing an error. So we know we are passing the values we want into the function, what else could be wrong? Lets take a look at your properties.

Here they are defined as:

  _courses: {
    _appetizers: [],
    _mains: [],
    _desserts: []
  },

And in your getters you leave out the _ before the course name

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

If you remove _ from your properties the error goes away. However logging the menu at the bottom of your code reveals another problem:

  console.log(menu.courses); // prints { appetizers: undefined, mains: undefined, desserts: undefined }

Accessing one of the courses directly console.log(menu._courses.appetizers); prints an empty array [ ], so something must be wrong with your courses getter.

You wrote a correct getter here but it is also calling more getters:

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

It is calling the getter for each of the courses (appetizers, mains, and desserts) but in those getters you left out an important keyword. Remember, a function will return undefined by default.

Fix the problems causing the error message and plug that keyword into those 3 getters - you should be good to go.

Hi midlinder, thanks for your help, it returns appetizers when I console.log(courseName)

Hi ryansup, much appreciated for your detailed reply.

So I did the following but still getting the same error.

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

If I remove the _ from the properties.
_courses: {
appetizers: ,
mains: ,
desserts:
},

When generating randomMeal I get const dishes = this._courses[courseName] is not defined.

Thanks for the help…

If you look at the two functions that you have below (getRandomDishFromCourse and getRandomMeal) you see that getRandomMeal calls getRandomDishFromCourse with an argument of the dish (for example: getRandomDishFromCourse(‘appetizers’). Your getRandomDishFromCourse() function does not take an argument currently so add an argument of courseName and declare getRandomDishFromCourse(courseName). That should take care of your error msg.

 getRandomDishFromCourse(){
  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 is ${appetizer.name}, ${main.name}, ${dessert.name} and your total prize equals ${totalPrice} `;
 }
2 Likes

Okay. Now look at your menu object, and the _courses object nested inside:

Is there a property of the _courses object named appetizers?

Edit: Just noticed you removed the _'s from your _courses properties. That’s good. Now try @mike7127143742’s suggestion.

Also, notice the difference between the code in your post, and the code in others’ posts? If you place your code between otherwise blank lines that contain only three back ticks, your original formatting will be preserved.

```
code goes here
```
1 Like

Got it, much appreciated, thanks Mike, thanks to everybody I’m grateful for all your help…

2 Likes