Meal Maker Project

#1

I keep getting the following error from my code in the Meal Maker project: Can someone please help me figure out how to fix this issue? Many thanks. Please find my code below.

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

TypeError: Cannot read property ‘push’ of undefined

Here is my code below. Also, find it at the following link: https://gist.github.com/7298d0931dd3951130d711886f06df0b

const menu = {
_courses: {
appetizers: ,
mains: ,
desserts: ,

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

},
get appetizers() {
return this._appetizers;
},
set appetizers(appetizersInput) {
this._appetizers = appetizersInput;
},
get mains() {
return this._mains;
},
set mains(mainsInput) {
this._mains = mainsInput;
},
get desserts() {
return this._desserts;
},
set desserts(dessertsInput) {
this._desserts = dessertsInput;
}
},
addDishToCourse(courseName, dishName, dishPrice) {
const dish = {
name: this._dishName,
price: this._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.price + main.price + dessert.price);
return Your meal is ${appetizer.name} + ${main.name} + ${dessert.name} and your total price is ${totalPrice}.
}
}

menu.addDishToCourse(‘appetizers’, ‘Bruchetta’, 7.99);

1 Like
#2

The attribute _appetizers is not defined, and neither are _mains and _desserts.

1 Like
#3

Hi there, thanks for responding. I made the following additions to my code, however the same error (as before) is returned (ie. /home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:38
this._courses[courseName].push(dish);
^

TypeError: Cannot read property ‘push’ of undefined)

get appetizers() {
  return this._appetizers;
},
set appetizers(appetizersInput) {
  const appetizers = appetizersInput;
},
	get mains() {
  return this._mains;
},
set mains(mainsInput) {
  const mains = mainsInput;
},
get desserts() {
  return this._desserts;
},
set desserts(dessertsInput) {
  const desserts = dessertsInput;
}
1 Like
#4

Furthermore, would you say there is a need for setters in this project? The project (step 4) requests it, but im not sure how much they’re needed here.

1 Like
#5

Be sure you have created the needed backing variable attributes…

const menu = {
  _courses: {     
    _appetizers: [],
    _mains: [],
    _desserts: [],
    # ...
  }
};

As we could just as easily create a program with no getters or setters, I would not argue in their favor; however, for the sake of the lessons we might learn in attempting to implement them, and the fact of the matter that is the topic of this lesson, let’s consider them as needed. Expect some ambiguity as this is all new and hard to make complete sense of.

As a basic measure, give all the backing variables a getter, to start with, then work on implementing setters as you go. You’ll see it argued in the forums how wrong their implementation is in this instance, but give it a go, anyway. You can always come back and try other approaches, such as, addMains, addAppetizers, addDesserts, just so long as you try to fulfill the instructions at first, then adapt new code on review.

1 Like
#6

I have updated my code following your advice to include the “_” backing variable: https://gist.github.com/4dacc373d0bdc8b7927912cd6996fe31

However, nothing is returned to the console following the final step (ie. after calling menu.generateRandomMeal). Would you happen to know why this is occurring? Posting my code (which can also be found through the attached link) here, for easier viewing:

const menu = {
  _courses: {
    _appetizers: [],
    _mains: [],
    _desserts: [],
    
    get _courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts     
    }
  },
    get appetizers() {
      return this._appetizers;
    },
    set appetizers(appetizersInput) {
      const appetizers = appetizersInput;
    },
 		get mains() {
      return this._mains;
    },
    set mains(mainsInput) {
      const mains = mainsInput;
    },
    get desserts() {
      return this._desserts;
    },
    set desserts(dessertsInput) {
      const desserts = dessertsInput;
    }
  },
  addDishToCourse(courseName, dishName, dishPrice) {
   const dish = {
     name: this._dishName,
     price: this._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.price + main.price + dessert.price);
    return `Your meal is ${appetizer.name} + ${main.name} + ${dessert.name} and your total price is ${totalPrice}.`
  }
}

menu.addDishToCourse('appetizers', 'Bruchetta', 7.99);
menu.addDishToCourse('appetizers', 'french fries', 6.99);
menu.addDishToCourse('appetizers', 'Garden Salad', 5.99);
menu.addDishToCourse('mains', 'Pesto Pasta', 18.99);
menu.addDishToCourse('mains', 'Chickpea Burger', 16.99);
menu.addDishToCourse('mains', 'Shashuksha', 19.99);
menu.addDishToCourse('desserts', 'Tirimisu', 7.99);
menu.addDishToCourse('desserts', 'Mud Cake', 5.99);
menu.addDishToCourse('desserts', 'Souffle', 8.99);

const meal = menu.generateRandomMeal();
1 Like
#7

Two things wrong with the above:

  1. We should not use const in a method. It is sufficiently encapsulated to just use let, but in this instance there is no need for a variable in the method.
  2. = makes a value assignment that wipes out the array, leaving only a singular value in its place. Use Array.push().

The part about using a setter on an array is what might confuse some, and this part is even more contrived, yet works as expected (though confusing to the reader)…

    set appetizers(newAppetizers) {
        this._appetizers.push(newAppetizers);
    }
    set mains(newMains) {
        this._mains.push(newMains);
    }
    set desserts(newDesserts) {
        this._desserts.push(newDesserts);
    }

    // ...


  addDishToCourse(courseName, dishName, dishPrice) {
   const dish = {
     name: this._dishName,
     price: this._dishPrice
   }
   this._courses[courseName] = dish;      
  },
1 Like
#8

like this?

I used return instead of ‘=’. Apologies for all the questions, I’m new to this and the instructions are quite ambiguous.

Thank you for all your help!

2 Likes
#9

Be sure to write that getter in the correct context… menu.

    menu = {
      _courses: {

      },
      get courses () {

      }
    };
1 Like
#10

Now getting the following error:

/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:33
addDishToCourse(courseName, dishName, dishPrice) {
^^^^^^^^^^^^^^^
SyntaxError: Missing initializer in const declaration

my code below:

1 Like
#11

The three attributes in the _courses object should have their setters and getters in that context, not in the menu context.

1 Like
#12

How would I do that, would you be able to show me using my code? (I’m finding it difficult to understand what you mean by that). Once again, thanks for all your assistance.

1 Like
#13 
    menu = {
      _courses: {
        _appetizers: [],
        _mains: [],
        _desserts: [],
        get appetizers () {
        },
        get mains () {
        },
        get desserts () {
        },
        set .. () {
        },
        // ...
      },
      get courses () {

      },
      addDishToCourse (...) {
      },
      generateRandomMeal () {
      }
    };
1 Like
#14

Thank you.

This is being logged to the console:
Your meal is undefined + undefined + undefined and your total price is NaN.

When i print the following code:

1 Like
#15 
  addDishToCourse(courseName, dishName, dishPrice) {
   const dish = {
     name: this._dishName,
     price: this._dishPrice
   }
   this._courses[courseName].push(dish);      
},

‘dish’ is plain object that has no getters or setters, so should not have backing variables. There is no context that we need to refer to, either (so no this.)

name: dishName,
price: dishPrice
1 Like
#16

Amazing! Thank you for all your help - it worked. Here is the final code:

2 Likes
#17

I’m seeing a similar problem in the push(dish) area and can’t get this to work out.

I can barely understand what’s going on as it is. The video example, even when followed exactly as he did it, is producing this error and so is the solution shown here, which appears to follow a different procedure for using setters.

I just can’t figure out what’s going on here.

1 Like
#18

Hi there,

Do you mind posting your code, would love to have a look at it!

Thanks

#19

Hello, Ashibhat95. This is what I ended up with:

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(appetizersInput) {
return appetizers.push(appetizersInput);
},
set mains (mainsInput){
return mains.push(mainsInput);
},
set desserts (dessertsInput){
return desserts.push(dessertsInput);
},
get courses (){
return {
appetizers: this.appetizers,
mains: this.mains,
desserts: this.desserts,
};
},
addDishToCourse(courseName, dishName, dishPrice) {
const dish = {
name: 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(‘desserts’);
const totalPrice = appetizer.price + main.price + dessert.price;
return Your meal is ${appetizer.name}, ${main.name}, and ${dessert.name}, which comes to ${totalPrice}.
}
};

menu.addDishToCourse(‘appetizers’, ‘Pearzolanut Salad’, 9.75);
menu.addDishToCourse(‘appetizers’, ‘Low Country Chowder’, 7.15);
menu.addDishToCourse(‘appetizers’, ‘Tomalito With Jalapeno Chutney’, 6.50);

menu.addDishToCourse(‘mains’, ‘Rosemary Thyme Lamb Chops’, 18.75);
menu.addDishToCourse(‘mains’, ‘Seared Maple Bacon Trout’, 21.75);
menu.addDishToCourse(‘mains’, ‘Fried Chicken Porkbelly Bleu’, 16.25);

menu.addDishToCourse(‘desserts’, ‘Key Lime Cheesecake’, 6.75);
menu.addDishToCourse(‘desserts’, ‘Heavenly Hash Brownie’, 7.25);
menu.addDishToCourse(‘desserts’, ‘Seasonal Compote Parfait’, 8.00);

const meal = menu.generateRandomMeal();

console.log(meal);

#20

Hi there, I had a look at your code and a few things to call out:

  • You need to initialise appetizers, mains and desserts to empty arrays (lines 3-5)
  • Your getters and setters are in the wrong scope (you can fix this by moving the curly brace from line 6 to line 25 - ie. after your getters/setters section)
  • In your getters for appetizers, mains and desserts, you don’t need return this._courses.appetizers;, it’s simply just return this._appetizers; (ie. remove the _courses)
  • You can remove the return statement from your addDishToCourse(courseName, dishName, dishPrice) method to make it this._courses[courseName].push(dish); , instead of return this._courses[courseName].push(dish);

Let me know if those tips help!

Thanks,