Meal Maker JS- (TypeError: Cannot read property 'length' of undefined)

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

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

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

  addDishToCourse(courseName,dishName,dishPrice){
    const dish = {
      dish: dishName,
      price: 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('dessert');
    const totalPrice = appetizer.price + main.price + dessert.price;
    return `Your dishes are ${appetizer.name},${main.name},${dessert.name} and the total price is ${totalPrice}`;
  },

};

menu.addDishToCourse('appetizers','salad','$4');
menu.addDishToCourse('appetizers','fries','$4');
menu.addDishToCourse('appetizers','soup','$4');

menu.addDishToCourse('mains','chicken','$7');
menu.addDishToCourse('mains','lamb','$7');
menu.addDishToCourse('mains','beef','$7');

menu.addDishToCourse('desserts','cake','$10');
menu.addDishToCourse('desserts','ice cream','$10');
menu.addDishToCourse('desserts','souffle','$10');



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

this very likely means, here:

const dishes = this._courses[courseName];

we use a courseName which isn’t a property/key of dishes. We can use .log() to see what courseNames we are using:

console.log(courseName);
const dishes = this._courses[courseName];

appetizers and mains look fine, but there is no "dessert" property in courses. What should the property be?

Thanks! I got it to work but the console shows:

Your dishes are undefined,undefined,undefined and the total price is $4$7$10.

It seems like something’s wrong with the generateRandomMeal() or I have missed something out somewhere

here:

menu.addDishToCourse('appetizers','salad','$4');

the prices should really be Numbers, so we can easily work with the prices. Then when we want to display the output, we can put a dollar sign in front.

we can apply the same trick again? we can simple use log to inspect our code:

const appetizer = this.getRandomDishFromCourse('appetizers');
console.log(appetizer);

Do you see a name property?

Learning to debug your code is such a useful skill to have.

alright got it
thanks a lot

The error is in these lines of codes:

const totalPrice = appetizer.price + main.price + dessert.price;
return Your dishes are ${appetizer.name},${main.name},${dessert.name} and the total price is ${totalPrice};

Replace: price to dishPrice and name to dishName

ex: const totalPrice = appetizer.dishPrice …

This topic has already been resolved?

Furthermore, your suggestion does not work.

the properties of dishes are dish and price. So appetizer.price was already fine. Finally, why are those the values you want to change? I on purpose left that open, but I would personally make the change here:

const dish = {
      dish: dishName,
      price: dishPrice,
    };

and change the dish key/property of the object to name, which is a more accurate description.

My bad, because in my project i created dish object like this:
dish = {dishName, dishPrice};

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.