Meal Maker Struggles! in Introduction to Javascript

#1

I am getting the same cannot read property of push of undefined error that alot of people are getting
this.courses[courseName].push(dish)
TypeError: Cannot read property ‘push’ of undefined
at Object.addDishToCourse
that alot of people are seeing

I can’t for the life of me see were the syntax error is in the code. Any ideas. I have looked at the forums and the video and I look to be following the exact code others are using for this.

const menu = {

  //Our restaurants great select of food
  _courses: {
    appetizers: [],
    mains: [],
    desserts: [],
},

//warm up the appetite!!!!!
get appetizers(){
 return this._courses.appetizers; 
},

set appetizers(appetizers){
	this._courses.appetizers = appetizers;
 },

//The main course baby!!!!
get mains(){
 return this._courses.mains;  
},
  
set mains(mains){
   this._courses.mains = mains;
 },

//Save room for dessert!!!!!
get desserts(){
 return this._courses.desserts; 
},

 set desserts(desserts){
   this._courses.desserts = desserts;
 },
  
//Get Method to access the list of great appetizers, main dishes, and deserts to choose from :)
get courses() {
      return {
         appetizers: this._courses._appetizers,
         mains: this._courses._mains,
         desserts: this._courses._desserts
   };
},
  
  /*  error was here ????
get courses() {
      return {
         appetizers: this.appetizers,
         mains: this.mains,
         desserts: this.desserts
   };
}, */ 

// Sets a dish to a course object. What fun is it to have more selections  on the menu!!
addDishToCourse(courseName, dishName, dishPrice){
    const dish = {
      name: dishName,
      price: dishPrice,
    };
  //doesn't work at this point
     this.courses[courseName].push(dish)
   },
    

//Generates a random dish from a course's list of exciting options
getRandomDishFromCourse(courseName){
    const dishes = this._courses[courseName];
    const index = Math.floor(Math.random()*dishes.lenght);
    return dishes [index];  
}, 
  
//Creates an random meal and generates a price of the said meal
generateRandomMeal(){
    const appetizer =this.getRandomDishFromCourse('appetizers');
    const main = this.getRandomDishFromCourse('mains');
    const desert = this.getRandomDishFromCourse('deserts');
    const totalprice = appetizer[price]+main[price]+desert[price];
    return console.log(`Your appetizer is ${appetizer.name}, your main dish is ${main.name}, and your desert is ${desert.name}. The total price of your meal is ${totalprice}.`);
  }, 
};

//What's our menu going to be. Let's add some selections.
menu.addDishToCourse('mains','pizza',2.00);
menu.addDishToCourse('mains','salmon',4.00);
menu.addDishToCourse('mains','burger',1.50);
menu.addDishToCourse('appetizers','salad',1.00);
menu.addDishToCourse('appetizers','snails',1.00);
menu.addDishToCourse('appetizers','mushroom soup',1.00);
menu.addDishToCourse('desert','fruit salad',0.50);
menu.addDishToCourse('desert','orange serbert',2.00);
menu.addDishToCourse('desert','vanilla ice cream',3.00);

const meal = menu.generateRandomMeal();
console.log(meal);
#2

The setters won’t work as expected since they should be pushing values to their respective arrays.

1 Like
#3

Okay, so how is that fixed?

#4

At present the code is making assignments with = which is replacing the current value. We don’t want that, do we? The values are arrays which means we need to manipulate the array with the setter.

this._courses.appetizers.push(value)

Another thing to consider…

The courses getter has variables that don’t exist. _appetizers, &c.

courses does not have a setter, so this is it. Will need to access the backing variable from here.

this._courses ...
#6

Then you’ll need to check the spelling of ‘desserts’ up and down your program code.

Although if you were in the desert, you’d probably kill for a vanilla ice cream :wink:

#7

This is the line that @antonjw is referring to.

#8

const index = Math.floor(Math.random()*dishes.**lenght**); oops :wink:

#9

We’ve all been so busy finding typos, etc that we haven’t got into the logic yet. @khorheil_and_techpri, please repost your corrected code so we can have another look without the distraction of tracking down simple errors.

#10

I guess the website isn’t a full IDE or notepad with spellcheck LOL.

#11

Personally, I would never use a spelling checker in a code environment. There is nothing prosaic about the language that a spellchecker can begin to recognize. That’s why we have syntax highlighting and linting.

Have you cleaned up your code and got it working?

#12

Okay I’ll test with this._courses.appetizers.push(value) . It puzlles me

#13

What should the syntax be?

#14

This is what I have after

const menu = {

  //Our restaurants great select of food
  _courses: {
    appetizers: [],
    mains: [],
    desserts: [],
},

//warm up the appetite!!!!!
get appetizers(){
 return this._courses.appetizers; 
},

set appetizers(appetizers){
	this._courses.appetizers = appetizers;
 },

//The main course baby!!!!
get mains(){
 return this._courses.mains;  
},
  
set mains(mains){
   this._courses.mains = mains;
 },

//Save room for dessert!!!!!
get desserts(){
 return this._courses.desserts; 
},

 set desserts(desserts){
   this._courses.desserts = desserts;
 },
  
//Get Method to access the list of great appetizers, main dishes, and desserts to choose from :)
get courses() {
      return {
         appetizers: this._courses._appetizers,
         mains: this._courses._mains,
         desserts: this._courses._desserts
   };
},
  
  /*  error was here ????
get courses() {
      return {
         appetizers: this.appetizers,
         mains: this.mains,
         desserts: this.desserts
   };
}, */ 

// Sets a dish to a course object. What fun is it to have more selections  on the menu!!
addDishToCourse(courseName, dishName, dishPrice){
    const dish = {
      name: dishName,
      price: dishPrice,
    };
  //doesn't work at this point
     this._courses[courseName].push(dish)
   },   

//Generates a random dish from a course's list of exciting options
getRandomDishFromCourse(courseName){
    const dishes = this._courses[courseName];
    const index = Math.floor(Math.random()*dishes.lenght);
    return dishes [index];  
}, 
  
//Creates an random meal and generates a price of the said meal
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 console.log(`Your appetizer is ${appetizer.name}, your main dish is ${main.name}, and your dessert is ${dessert.name}. The total price of your meal is ${totalprice}.`);
  }, 
};

//What's our menu going to be. Let's add some selections.
menu.addDishToCourse('mains','pizza',2.00);
console.log(menu.addDishToCourse('mains','pizza',2.00));
menu.addDishToCourse('mains','salmon',4.00);
menu.addDishToCourse('mains','burger',1.50);
menu.addDishToCourse('appetizers','salad',1.00);
menu.addDishToCourse('appetizers','snails',1.00);
menu.addDishToCourse('appetizers','mushroom soup',1.00);
menu.addDishToCourse('desert','fruit salad',0.50);
menu.addDishToCourse('dessert','orange serbert',2.00);
menu.addDishToCourse('desert','vanilla ice cream',3.00);

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

this._courses[courseName].push(dish) doesn’t work either.

#15
this._courses.appetizers.push(appetizer)

We need to preserve the integrity of the array so must push new items to it. Assignment will wipe it out and change the data structure so other code won’t run right .

Note the singular on the parameter name, appetizer. We wouldn’t name a single item after the whole group. Apple is a singular of the plural, apples.

#16

So instead of this._courses[courseName].push(dish)
I need to individually use push method on item appetizer, mains, etc??

These are variable names.

#17

If you do it the way it is above, the courses don’t need setters. If you wish for them to have setters. then the push will be in them, and the syntax above will change to,

this._courses[courseName] = dish;