Meal maker logs undefined. What went wrong? Thanks!


#1

Link to the exercise here:
https://www.codecademy.com/courses/introduction-to-javascript/projects/meal-maker

Hey! I have tried to solve this project Meal Maker but I got undefined values but I get total price correct. I did tried to solve it by myself and look on forums but I cant find what is wrong here. No errors but just undefined values. Console says this:
“Your meal is undefined, undefined, undefined. The price is 34.”

My code is here…

// object starts

const menu = {
  _courses: {
    appetizers: [],
    mains: [], 
    desserts: [],
  },

  // GET

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

  // SET

  set appetizers(appetizer)	{
    this.appetizers.push(appetizer);
  },
  
  set mains(main) {
    this.mains.push(main);
  },
  
  set desserts(dessert) {
    this.desserts.push(dessert);
  },

  // Object continues
  
  addDishToCourse(courseName, dishName, dishPrice) {
    let dish = {
      courseName: courseName,
      dishName: dishName,
      dishPrice: 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('desserts');
    
const totalPrice = appetizer.dishPrice + main.dishPrice + dessert.dishPrice;
    
    return `Your meal is ${appetizer.name}, ${main.name}, ${dessert.name}. The price is ${totalPrice}.`;
  },
  
  // Object ends

};

menu.addDishToCourse('appetizers', 'salad', 10);
menu.addDishToCourse('appetizers', 'green salad', 12);
menu.addDishToCourse('appetizers', 'caesar salad', 14);
menu.addDishToCourse('mains', 'chicken', 17.50);
menu.addDishToCourse('mains', 'beef', 15);
menu.addDishToCourse('mains', 'chili pancakes', 12);
menu.addDishToCourse('desserts', 'ice cream', 5);
menu.addDishToCourse('desserts', 'sweet pancakes', 4);
menu.addDishToCourse('desserts', 'lemonade vodka', 3);

let meal = menu.generateRandomMeal();
console.log(meal);
 

So what went wrong? Thank you for our help!


#2

lets start by your getters (and possible setters), getters and setters allow us to manipulate the behavior of a property.

menu object does not have a appetizers property. The getter method for appetizers should be part of courses object:

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

now, i will admit that projects shows the usage of getters and setters, but without adding much value (mostly default property behavior).


#3

Thank you for your reply. I am not sure if I understood this correctly.

In my previous code getters are part of menu object but they are not part of _courses. Should they be part of courses as well? I watched this exercise’s hint picture (in part 4.) and that seems to have getters outside of courses object (but inside of menu as I have) in the picture shown. I have to say that I dont really understand the meaning of these getters in this exercise.

If I write code as you mentioned to put getters inside of _courses I get reference error.


#4

yes and no, the getters manipulate the behavior of property belonging to object.

the getter method for courses property is at the right place, given courses is a property of menu object

however, the getter method for mains, desserts and appetizers is at the wrong place, given mains (and the rest) are not properties of menu object

mains (and the rest) are properties of courses object (yes, courses is both a property of menu object and an object on its own). As such, the getter methods of mains property should be part of the object to which the mains property belongs, thus like i showed you:

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

impossible to say why, without seeing the code, maybe a missing , somewhere?


#5

Ah okey. Thanks. I think I understood.

I changed my code and get rid of reference errors but now I got some other errors. How to fix this?

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

TypeError: Cannot read property ‘push’ of undefined"

My code is here:

const menu = {
  _courses: {
    appetizers: [],
    mains: [], 
    desserts: [],
   
    get appetizers() {
    return this._appetizers;
  },
     get mains() {
    return this._mains;
  },
    get desserts() {
    return this._desserts;
  },
  },
 
  get courses() {
    return {
    appetizers: this._courses.appetizers,
    mains: this._courses.mains,
    desserts: this._courses.desserts,
      }
  },
  
  set appetizers(appetizer)	{
    this.appetizers.push(appetizer);
  },
  
  set mains(main) {
    this.mains.push(main);
  },
  
  set desserts(dessert) {
    this.desserts.push(dessert);
  },
  
  addDishToCourse(courseName, dishName, dishPrice) {
    let dish = {
      courseName: courseName,
      dishName: dishName,
      dishPrice: 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('desserts');
    
const totalPrice = appetizer.dishPrice + main.dishPrice + dessert.dishPrice;
    
    return `Your meal is ${appetizer.name}, ${main.name}, ${dessert.name}. The price is ${totalPrice}.`;
  },
  
  // OBJEKTI LOPPUU
};

menu.addDishToCourse('appetizers', 'salad', 10);
menu.addDishToCourse('appetizers', 'green salad', 12);
menu.addDishToCourse('appetizers', 'caesar salad', 14);
menu.addDishToCourse('mains', 'chicken', 17.50);
menu.addDishToCourse('mains', 'beef', 15);
menu.addDishToCourse('mains', 'chili pancakes', 12);
menu.addDishToCourse('desserts', 'ice cream', 5);
menu.addDishToCourse('desserts', 'sweet pancakes', 4);
menu.addDishToCourse('desserts', 'lemonade vodka', 3);

let meal = menu.generateRandomMeal();
console.log(meal);

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


#6

what i said about the getters, also applies to the setters. I left it out on purpose, see if you could figure it out.

the moment a property uses getters (and possible setters), the property should start with a underscore, so it should be:

_appetizers: [],