Meal Maker evaluates to undefined & NaN

On the Meal Maker project at https://www.codecademy.com/paths/web-development/tracks/web-dev-js-arrays-loops-objects/modules/learn-javascript-objects/projects/meal-maker, my code evaluates to:

Your meal is undefined, undefined, and undefined. The price is $NaN.

Here’s my code

const menu = {
  _courses: {
    appetizers: [],
    mains: [],
    desserts: []
  },
  get appetizers() {
    return this._courses.appetizers;
  },
  set appetizers(appetizers) {
    this._course.appetizers = appetizers
  },
  get mains() {
    return this._courses.mains;
  },
  set mains(mains) {
     this._course.mains = mains   
  },
  get desserts() {
      return this._courses.desserts;
  },
  set desserts(desserts) {
    this._course.desserts = desserts    
  },
  get courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse(courseName,dishName,dishPrice) {
    const dish = {
      name: this.dishName,
      price: this.dishPrice
    };
    return 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 is ${appetizer.name}, ${main.name}, and ${dessert.name}. The price is $${totalPrice}.`;
  }
};

menu.addDishToCourse('appetizers', 'Olives & Manchego', 6.50);
menu.addDishToCourse('appetizers', 'Garden Salad', 5.50);
menu.addDishToCourse('appetizers', 'Sauteed Scallop', 9.50);
menu.addDishToCourse('mains', 'Roasted Chicken', 8.50);
menu.addDishToCourse('mains', 'Pasta & Mushrooms', 7.50);
menu.addDishToCourse('mains', 'Grilled Salmon', 11.50);
menu.addDishToCourse('desserts', 'Classic Chocolate Cake', 7.00);
menu.addDishToCourse('desserts', 'Trio of Homemade Ice Creams', 5.50);
menu.addDishToCourse('desserts', 'Coffee Creme Brulee', 8.50);

const meal = menu.generateRandomMeal();

console.log(meal);

I’ve gone through line-by-line (forwards and backwards and forwards and backwards), and I just can’t seem to “see” what’s causing the undefined/NaN evals.

Can someone please take a look and clue me in?

Thanks!

we could start by inspecting the variable we use:

  generateRandomMeal() {
    const appetizer = this.getRandomDishFromCourse('appetizers');
    const main = this.getRandomDishFromCourse('mains');
    const dessert = this.getRandomDishFromCourse('desserts');
    console.log(appetizer, main, dessert);
    const totalPrice = appetizer.price + main.price + dessert.price;
    return `Your meal is ${appetizer.name}, ${main.name}, and ${dessert.name}. The price is $${totalPrice}.`;
  }

so we have our appetizer, but name and price are undefined.

so lets inspect getRandomDishFromCourse:

getRandomDishFromCourse(courseName) {
    const dishes = this._courses[courseName];
    const randomIndex = Math.floor(Math.random() * dishes.length);
    console.log(dishes);
    return dishes[randomIndex];
  },

again undefined.

Maybe setting the dishes then doesn’t go well? Lets find out:

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

now we are getting somewhere. Maybe you should inspect all values/variables used in this function?

Can you clarify “inspect?” Do you mean that I should evaluate them to the console? If so, I tried that and it only returned syntax errors when I broke down and “inspected” the code this way.

Thanks for explaining what you mean.

Inspecting is a general term to inspect/view something, logging is one option, yes

I showed you a couple of logs you could add to your code (and remove after you are done).

You can’t just insert one method of an object in the console, that is going to result in a syntax error.

if you are familiar with the dev tools, using the debugger + breakpoints might be a nicer solution?

I got that you inserted the log, and as you can see, I clearly don’t know how to use it. Do I paste my entire block of code?

Sorry I’m not that familiar. All I’ve learned thusfar are the Elements and Console panels.

I don’t know how to deploy the debugger + breakpoints.

Can you help me there?

I must apologize again. I’ve literally been at this for four weeks total, all here on Codecademy. So far Javascript has been completely beyond me…I just do not understand the code at all, what the snippets mean, why they’re put where they are. I’m just doing my best to follow along at this point. I constantly Google and read MDN, Stackoverflow, Javascript.org articles on what I’m learning – I even watch videos on YouTube – but my understanding of it is just not there. I don’t “get” it.

you have to insert the logs in your original code, then run the code again.

there is also a debug panel (or debugger). I am sure there are good tutorials out there which can help:

https://developers.google.com/web/tools/chrome-devtools/javascript

Much cleaner then using logs.

oh, okay. I’ll do some more studying on this then.

Perhaps someday I’ll get this project completed. What would be wonderful is to understand it. I’m so not there.

I put your code in a bin:

https://jsbin.com/mixeyorari/edit?js,console

which you can run, with the log. As you can see, the name and price are undefined. Which tells us, this.dishName and this.dishPrice are undefined. How could that be?

Just as you were posting your last helpful message, I figured it out.

I ended up re-watching the helper video and realized my error: adding a couple of unnecessary this keywords into the addDishToCourse function. I guess you could say I had a case of ‘this’-itis.

Anyways once I got rid of the offending thises (sic), the code logged as desired with the defined values.

`//Meal Maker
//random menu generator

const menu = {
_courses: {
appetizers: [],
mains: [],
desserts: []
},
get appetizers() {
return this._courses.appetizers;
},
get mains() {
return this._courses.mains;
},
get desserts() {
return this._courses.desserts;
},
set appetizers(appetizers) {
this._course.appetizers = appetizers;
},
set mains(mains) {
this._course.mains = mains;
},
set desserts(desserts) {
this._course.desserts = desserts;
},
get courses() {
return {
appetizers: this.appetizers,
mains: this.mains,
desserts: this.desserts
};
},
addDishToCourse(courseName,dishName,dishPrice) {
let dish = {
name: dishName,
price: dishPrice,
};
console.log('adding dish', dish);
return 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 is ${appetizer.name}, ${main.name}, and ${dessert.name}. The price is $${totalPrice}.;
}
};

menu.addDishToCourse('appetizers', 'Olives & Manchego', 6.50);
menu.addDishToCourse('appetizers', 'Garden Salad', 5.50);
menu.addDishToCourse('appetizers', 'Sauteed Scallop', 9.50);
menu.addDishToCourse('mains', 'Roasted Chicken', 8.50);
menu.addDishToCourse('mains', 'Pasta & Mushrooms', 7.50);
menu.addDishToCourse('mains', 'Grilled Salmon', 11.50);
menu.addDishToCourse('desserts', 'Classic Chocolate Cake', 7.00);
menu.addDishToCourse('desserts', 'Trio of Homemade Ice Creams', 5.50);
menu.addDishToCourse('desserts', 'Coffee Creme Brulee', 8.50);

const meal = menu.generateRandomMeal();

console.log(meal);

// Output: adding dish {name: "Olives & Manchego", price: 6.5}
// VM26:37 adding dish {name: "Garden Salad", price: 5.5}
// VM26:37 adding dish {name: "Sauteed Scallop", price: 9.5}
// VM26:37 adding dish {name: "Roasted Chicken", price: 8.5}
// VM26:37 adding dish {name: "Pasta & Mushrooms", price: 7.5}
// VM26:37 adding dish {name: "Grilled Salmon", price: 11.5}
// VM26:37 adding dish {name: "Classic Chocolate Cake", price: 7}
// VM26:37 adding dish {name: "Trio of Homemade Ice Creams", price: 5.5}
// VM26:37 adding dish {name: "Coffee Creme Brulee", price: 8.5}
// VM26:66 Your meal is Garden Salad, Grilled Salmon, and Coffee Creme Brulee. The price is $25.5.`

Thanks much for your help and patience with this (often frustrated) newbie.

Because now you use the parameters of the methods, not some none existing property.

1 Like