Meal maker project (https://www.codecademy.com/courses/introduction-to-javascript/projects/meal-maker)

[nidhikala]

I do know why am I getting this error: TypeError: Cannot read property ‘length’ of undefined
** at Object.getRandomDishFromCourse**

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

const menu={

  _courses:{

    get courses(){

      return {

        appetizers: this.appetizers,

        mains: this.mains,

        desserts: this.desserts

      }

    },

    appetizers: [],

    mains:[],

    desserts:[]},

  get appetizers(){},

  get mains(){},
  get desserts(){},

  set appetizers(appetizerIn){},

  set mains(mainsIn){},

  set desserts(dessertsIn){},

  addDishToCourse(courseName, dishName,dishPrice){

    const dish={

      price: dishPrice,

      name: dishName

    }

    return this._courses[courseName].push(dish);

  },

  getRandomDishFromCourse(courseName){

const dishes= this._courses[courseName];

const randomNumber = Math.floor(Math.random() * dishes.length);

    return dishes[randomNumber]
    },

    generateRandomMeal(){

      const appetizer = this.getRandomDishFromCourse('appetizer');

      const mains = this.getRandomDishFromCourse('mains');

 const desserts = this.getRandomDishFromCourse('desserts'); const totalPrice = appetizer.price + mains.price + desserts.price;

 return `Your meal price is ${totalPrice}`

 }

    }

menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);

menu.addDishToCourse('mains','Pizza', 9.99);

menu.addDishToCourse('desserts','brownie',6.99);

const meal = menu.generateRandomMeal()

[toastedpitabread]

Hi! Thanks for sharing your code

It means that when you get to Object.getRandomDishFromCourse, your code is being asked to read the length of something that’s undefined.

Try highlight all your code and pressing the </> button to format it. It’ll be easier for us to follow the flow of your code and pinpoint more specifically where the issue is.

[nidhikala]

const menu={
_courses:{
get courses(){
 return {
    appetizers: this.appetizers,
    mains: this.mains,
    desserts: this.desserts
  }
},
appetizers: [],
mains:[],
desserts:[]},
get appetizers(){},
get mains(){},
get desserts(){},
set appetizers(appetizerIn){},
set mains(mainsIn){},
set desserts(dessertsIn){},
addDishToCourse(courseName, dishName,dishPrice){
const dish={
  price: dishPrice,
  name: dishName
}
return this._courses[courseName].push(dish);
},

getRandomDishFromCourse(courseName){
const dishes= this._courses[courseName];
const randomNumber = Math.floor(Math.random() * dishes.length);
return dishes[randomNumber]
},
generateRandomMeal(){
  const appetizer = this.getRandomDishFromCourse('appetizer');
  const mains = this.getRandomDishFromCourse('mains');
const desserts = this.getRandomDishFromCourse(‘desserts’); const totalPrice = appetizer.price + mains.price + desserts.price;
return Your meal price is ${totalPrice}
}
}
menu.addDishToCourse(‘appetizers’, ‘Caesar Salad’, 4.25);
menu.addDishToCourse(‘mains’,‘Pizza’, 9.99);
menu.addDishToCourse(‘desserts’,‘brownie’,6.99);
const meal = menu.generateRandomMeal()

[toastedpitabread]

Check your code here. What are some random number you get? Do they all work with dishes[randomNumber]? If not you’ll get an undefined returned. Which was the source of that one error (there may be others, but at least you’ll catch that one!)

@nidhikala

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

[nidhikala]

 0
 0
 0
Your meal price is 21.23. Your Dishes are [object Object], [object Object], [object Object]

this is what I get in the console.
only 0 is the number I get

[mtf]

@nidhikala

const appetizer = this.getRandomDishFromCourse('appetizer');

That line doesn’t look right.

Also, after posting the platform may have changed some of your quotes into typographical quotes, rather than standard. Be sure your code does not contain any of those or it won’t work.

Also,

@nidhikala

const meal = menu.generateRandomMeal()

What if you wish to generate another random meal? That variable will not be reusable. Suggest use let instead, for that line.

[nidhikala]

thank you

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

I also changed to let insteal of const
I still get the same result:

0
0
0
Your meal price is 24.230000000000004 Your dishes are [object Object], [object Object], [object Object]

[mtf]

That’s because I only pointed out minor concerns, not the cause of the problem.

@nidhikala

return Your meal price is ${totalPrice}

We can only see that line in your code above. Please re-post the code in a new reply. Be sure to format before you click Reply.

We see that the prices are adding up, so that is a good sign.

@nidhikala

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

This is actually making sense since we are serving only one appetizer. Suggest your do the same with the other two… Make them singular, as well.

main =  ... ('mains')
dessert =  ... ('desserts')

Again, minor, but anything that make sense is a good thing.

[nidhikala]

I changed the code to: (added .name property to the variable)

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 price is ${totalPrice} Your dishes are  {appetizer.name}, ${main.name}, ${dessert.name}
}

then I added some more dishes using the

addDishToCourse(courseName, dishName,dishPrice) method.
after this I did get random numbers and different dishes.
so I suppose I was getting 0 as the only number previously because I only had one dish pushed into the array.
Am I getting it right conceptually?

[mtf]

@nidhikala

Am I getting it right conceptually?

It does appear that way. Have you identified any of the potential issues that @toastedpitabread spoke of?

To check and make sure your courses getter is working, add a test line…

console.log(menu.courses)

[nidhikala]

the dishes[randomNumber] works with all dishes now.

console.log(menu._courses)
**Output:**
{ courses: [Getter],
  appetizers: 
   [ { price: 4.25, name: 'Caesar Salad' },
     { price: 6.25, name: 'avacado Salad' },
     { price: 7.25, name: 'garlic bread' },
     { price: 3.25, name: 'Cheese toast' } ],
  mains: 
   [ { price: 12.99, name: 'Pizza' },
     { price: 9.99, name: 'Pasta' },
     { price: 19.99, name: 'steak' },
     { price: 4.99, name: 'Egg Sandwich' } ],
  desserts: 
   [ { price: 6.99, name: 'brownie' },
     { price: 6.99, name: 'cake' },
     { price: 8.99, name: 'shortcake' },
     { price: 8.99, name: 'Strawberry shortcake' } ] }

[mtf]

@nidhikala

console.log(menu._courses)

What about when you use the getter?

menu.courses

[nidhikala]

console.log(menu.courses)
output: undefined

[mtf]

That means something is up with the setter. Looking at it now, I see it is inside the _courses context. Try moving it into menu context, and then,

appetizers: this._courses.appetizers
etc.

[nsholk]

Hello,
At the Meal Maker project’s conclusion the only result I am getting is:

undefined

I tried to code along with the video providing the solution thus I was pretty confident I was on track. There have been some JS error messages I cleaned up along the way, but this undefined is baffling me. The benefit of more experienced eyes looking this over would be of great help.

Regards

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._courses = appetizers;
    },
     set mains(mains){
      this._courses = mains;
      },
     set desserts(desserts){
      this._courses = desserts;
      },
      get courses(){
        return {
          appetizers: this.appetizers,
          mains: this.mains,
          desserts: this.desserts
        };
         },
addDishToCourse(courseName, dishName, dishPrice) { 
const dish = {
      name: courseName,
      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('desserts');
   const totalPrice = appetizer.price + main.price + dessert.price;
   return 
   `Your meal consists of ${appetizer.name}, ${main.name}, and ${dessert.name}. The cost is ${totalPrice}.`
 }

};
        
  
    
menu.addDishToCourse('appetizers', ' Buffalo Wings', 4.99);

menu.addDishToCourse('appetizers', ' Jalapeno Poppers', 6.99);

menu.addDishToCourse('appetizers', ' Potato Skins', 7.99);

menu.addDishToCourse('mains', ' Jerk Chicken', 14.99);

menu.addDishToCourse('mains', ' Pastrami Sandwich', 15.99);

menu.addDishToCourse('mains', ' Pizza Slice', 4.99);

menu.addDishToCourse('desserts', ' M&Ms', 4.99);

menu.addDishToCourse('desserts', ' cigar', 12.99);

menu.addDishToCourse('desserts', ' Vanilla Cake', 9.00);

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