Another 'Meal Maker' topic => "Your meal is undefined"


#1

Hello everyone!

I’ve resigned myself to ask for help here because I’m currently on my third day stuck on this project. I really - really - want to understand and make it work. The good news is: I’ve managed to get rid of all the bugs! Yay. But unfortunately, I get undefined variables… So, here’s the output that I’m getting right now.

The appetizer  has been added.
The appetizer [object Object] has been added.
The appetizer [object Object],[object Object] has been added.
The main  has been added.
The main [object Object] has been added.
The main [object Object],[object Object] has been added.
The dessert  has been added.
The dessert [object Object] has been added.
The dessert [object Object],[object Object] has been added.
The appetizer [object Object],[object Object],[object Object] has been added.
The main [object Object],[object Object],[object Object] has been added.
The dessert [object Object],[object Object],[object Object] has been added.
Your meal is undefined, undefined and your dessert is undefined. The total price is $NaN.

And here’s my code:

let menu = {
  _courses: {
    _appetizers: [],
    _mains: [],
    _desserts: [],
    
    set appetizers(newAppetizer)	{this._appetizers = newAppetizer;},
    set mains(newMain)	{this._mains = newMain},
    set desserts(dessert)	{this._desserts = newDessert},
    
    get appetizers()	{
      console.log(`The appetizer ${this._appetizers} has been added.`);
      return this._appetizers;
    },
    get mains()	{
      console.log(`The main ${this._mains} has been added.`);
      return this._mains;
    },
    get desserts()	{
      console.log(`The dessert ${this._desserts} has been added.`);
      return this._desserts;
    }
  }, // end of _courses object
  
  get courses()	{
    return {
      appetizers: this._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.desserts
    }
  }, // end of get courses()
  
  addDishToCourse(courseName, dishName, dishPrice)	{
    const dish = {
      name: dishName,
      price: dishPrice
    }; // end of the dish variable
    this._courses[courseName].push(dish);
  }, // end of the addDishToCourse method
  
  getRandomDishFromCourse(courseName)	{
    const dishes = this._courses[courseName];
    const randomIndex = Math.floor(Math.random() * dishes.length);
    return randomIndex; // To validate if I return the right thing here
  }, // end of the getRandomDishFromCourse method
  
  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 your dessert is ${dessert.name}. The total price is $${totalPrice}.`;
  } // end of the generateRandomMeal method
}; // end of the menu object

menu.addDishToCourse('appetizers', 'Pieuvre Grillee', 18);
menu.addDishToCourse('appetizers', 'Huitres Fraiches', 32);
menu.addDishToCourse('appetizers', 'Crevettes Geantes Bardees de Bacon', 21);
menu.addDishToCourse('mains', 'Burger Le Cochon', 18);
menu.addDishToCourse('mains', 'Burger Le Godfather', 20);
menu.addDishToCourse('mains', 'Filet Mignon 8oz', 42);
menu.addDishToCourse('desserts', 'Creme Brulee', 7);
menu.addDishToCourse('desserts', 'Churros au Dulce de Leche', 7);
menu.addDishToCourse('desserts', 'Gateau au Fromage Lime et Avocat', 8);

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

And here’s the link of my project.

Thanks in advance to anyone who’s going to help me :v:


#2

Meal Maker

Please remember to include a link to the exact exercise so we can be on the same page and able to test your code.

    set appetizers(newAppetizer)|{this._appetizers = newAppetizer;},
    set mains(newMain)|{this._mains = newMain},
    set desserts(dessert)|{this._desserts = newDessert},

newDessert is undefined, but I like the variable you used in the parameter… the singular.

set desserts(dessert) {
    this._desserts ...
}

Given that _desserts is an array, consider what side effect an assignment will have. It will replace it with a value, destroying the array.

set appetizers(appetizer) {
    this._appetizers.push(appetizer);
}

Follow the same pattern for the other two setters. Recommend use the singular, main and dessert for those two.

Getters can often be used to log out some information, but in this case they should just be returning the object.

get appetizers() {
    return this._appetizers;
}

What you are logging should be done in the addDishToCourse method, if at all.


#3

Blockquote Please remember to include a link to the exact exercise so we can be on the same page and able to test your code.

No problem, I’ll link the exact exercise in the future.

So, I updated my code based and your recommendations. I still get undefined values but the output is much more clear now. Here’s exactly what I get:

Your meal is undefined, undefined and your dessert is undefined. The total price is $NaN.

Here’s my updated code:

let menu = {
  _courses: {
    _appetizers: [],
    _mains: [],
    _desserts: [],
    
    set appetizers(appetizer)	{this._appetizers.push(appetizer);},
    set mains(main)	{this._mains.push(main);},
    set desserts(dessert)	{this._desserts.push(dessert);},
    
    get appetizers()	{return this._appetizers;},
    get mains()	{return this._mains;},
    get desserts()	{return this._desserts;}
  }, // end of _courses object
  
  get courses()	{
    return {
      appetizers: this._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.desserts
    }
  }, // end of get courses()
  
  addDishToCourse(courseName, dishName, dishPrice)	{
    const dish = {
      name: dishName,
      price: dishPrice
    }; // end of the dish variable
    this._courses[courseName].push(dish);
  }, // end of the addDishToCourse method
  
  getRandomDishFromCourse(courseName)	{
    const dishes = this._courses[courseName];
    const randomIndex = Math.floor(Math.random() * dishes.length);
    return randomIndex; // Need to validate if I return the right thing here
  }, // end of the getRandomDishFromCourse method
  
  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 your dessert is ${dessert.name}. The total price is $${totalPrice}.`;
  } // end of the generateRandomMeal method
}; // end of the menu object

menu.addDishToCourse('appetizers', 'Pieuvre Grillee', 18);
menu.addDishToCourse('appetizers', 'Huitres Fraiches', 32);
menu.addDishToCourse('appetizers', 'Crevettes Geantes Bardees de Bacon', 21);
menu.addDishToCourse('mains', 'Burger Le Cochon', 18);
menu.addDishToCourse('mains', 'Burger Le Godfather', 20);
menu.addDishToCourse('mains', 'Filet Mignon 8oz', 42);
menu.addDishToCourse('desserts', 'Creme Brulee', 7);
menu.addDishToCourse('desserts', 'Churros au Dulce de Leche', 7);
menu.addDishToCourse('desserts', 'Gateau au Fromage Lime et Avocat', 8);

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

Would you happen to be able to spot where it goes wrong? Or would you be able to give me a hint on how I could get to troubleshoot it? It is the first time that I work with object-oriented programming and it’s easy for me to get lost in the code due to my lack of experience at the moment.


#4

I’m able to log the dishes by using a console.log();in the addDishToCourse() method. Like this:

appetizers Pieuvre Grillee 18
appetizers Huitres Fraiches 32
appetizers Crevettes Geantes Bardees de Bacon 21
mains Burger Le Cochon 18
mains Burger Le Godfather 20
mains Filet Mignon 8oz 42
desserts Creme Brulee 7
desserts Churros au Dulce de Leche 7
desserts Gateau au Fromage Lime et Avocat 8
addDishToCourse(courseName, dishName, dishPrice)	{
    const dish = {
      name: dishName,
      price: dishPrice
    }; // end of the dish variable
    this._courses[courseName].push(dish);
    console.log(courseName + ' ' + dishName + ' ' + dishPrice);
  }, // end of the addDishToCourse method

But that doesn’t tell me yet why those values aren’t transposed into the generateRandomMeal()method yet. :thinking:


#5
console.log(`${courseName} added: ${dish.name}, ${dish.price}`);

#6

I got it! :tada:

Thanks Roy for your help. It turns out that I knew exactly where my mistake was, since I wrote in the comment // Need to validate if I return the right thing here on the line I was wrong. I was indeed not returning the right thing!


#7

So I take it, this,

return dishes[randomIndex];

is what you fixed?


#8

That’s exactly it :+1: