Debugging Meal Maker - Javascript Objects - help!

Get Help JavaScript
#1

I’m struggling with the Meal Maker exercise at the end of Javascript Objects, for the Introduction to Javascript objects course.

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

I’m getting the following error…

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

TypeError: Cannot read property ‘push’ of undefined
at Object.addDishToCourse

I’ve redone the lessons on getters and setters as a google search indicated that’s what the problem could be, but no joy. I’ve also followed the video walkthrough, and I’m still getting this error.

Here’s my code.

const menu = {
  _courses: {
    appetizers: [],
    mains: [],
    desserts: [],
  },
  get appetizers() {
    return this._courses.appetizers;
  },
  set appertizers(appetizer) {
    this._courses.appetizers = appetizer;
  },
  get mains() {
    return this._courses.mains;
  },
  set mains(main) {
    this._courses.mains = main;
  },
  get desserts() {
    return this._courses.desserts;
  },
  set desserts(dessert) {
    this._courses.desserts = dessert;
  },
  get courses() {
    return {
      appetizers: this._courses.appertizers,
      mains: this._courses.mains, 
      desserts: this._courses.desserts,
    }
  },
  addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {name: dishName, price: dishPrice};
    console.log(courseName, dishName, dishPrice);
    console.log(this._courses);
    console.log(this._courses[courseName]);
    this._courses[courseName].push(dish);
  },
  getRandomDishFromCourse(courseName) {
    let dishes = this.courses.dish;
    let i = Math.floor(Math.random * dishes.length);
    return dishes[i];
  },
  getRandomMeal() {
    let appetizer = this.getRandomDishFromCourse('appetizers');
    let main = this.getRandomDishFromCourse('main');
    let dessert = this.getRandomDishFromCourse('dessert');
    let totalPrice = appetizer.price + main.price + dessert.price;
    return `Your meal is ${appetizer.name}, ${main.name}, and ${dessert.name}. The price is ${totalPrice}.`;
  }
}

menu.addDishToCourse('appetizer', 'garlic bread', 2);
menu.addDishToCourse('main', 'peperonni pizza', 8.95);
menu.addDishToCourse('dessert', 'ben and jerrys', 4.73);

menu.addDishToCourse('appetizer', 'mussels', 5.34);
menu.addDishToCourse('main', 'lobster and rice', 17.75);
menu.addDishToCourse('dessert', 'sorbet', 8.95);

menu.addDishToCourse('appetizer', 'saag aloo', 3.45);
menu.addDishToCourse('main', 'chicken madras', 11.23);
menu.addDishToCourse('dessert', 'mango lassi', 2.30);

addDishToCourse() seems to be causing the problem

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

The error says “courseName” is undefined, but to me it is defined as a parameter of addDishToCourse()
I’ve tried logging the parameters to the console as part of the function and I can see the data coming through from my first call to addDishToCourse(). The parameter courseName on it’s own does log a value as I would expect it to.
this._courses[courseName] is logging as ‘undefined’, which validates the error I’m getting.

What am I missing? Do I need to match courseName to a specific key in _courses?

#2

You seem to have gotten pretty close?

you log courses:

console.log(this._courses);

which show you the keys of this object.

you also log courseName, which you are going to use as key to lookup a value in courses object

however, the key is appetizers while you use appetizer. Which is what causes the error

JS gives undefined when a property/key doesn’t exist in an object.

1 Like
#3

Thanks! That really helped, and I can see what the problem is now :slight_smile: You’ve given me a nudge in the right direction which was exactly what I needed.

So my code was looking for a key of ‘appertizer’ as that was what I had supplied as a parameter when I ran addDishToCourse?

I’m getting another error now but I’m going to see if I can solve this one on my own. Thanks so much!

2 Likes
#4

you solved most of it yourself, you had all the pieces

courseName is the parameter, the values comes when you call the method:

menu.addDishToCourse('appetizer', 'garlic bread', 2);
menu.addDishToCourse('main', 'peperonni pizza', 8.95);
menu.addDishToCourse('dessert', 'ben and jerrys', 4.73);

the first argument here was wrong, given it doesn’t match the names of the properties of your _courses object.

2 Likes
#5

Got it, thanks for the explanation!
I managed to solve my other error myself. Actually I had a few, but I was able to follow the data, clean up my code, and complete the exercise.

I’ve definitely learned something from this. Logging to the console is really helpful for understanding where errors happen. I’ve been using javascript alerts at work in a similar way, just to check a function is firing and checking the data it returns.

1 Like
#6

Debuggers also exists, they allow you to step through your code inspect it. And its included in most browser. You can google: chrome/firefox dev tools or chrome/firefox debugger.

The debugger quite useful, with logging you just have to hope you logged the right thing, with the debugger you can look at everything

1 Like