Meal Makers JavaScript Project

Hi! Currently I am trying to get trough the Meal Maker project…
Apparently I have the same code as in the walktrough video but that does not work for me.
Anything I do I get this error message:
/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:27
return {
^

RangeError: Maximum call stack size exceeded
at Object.get _courses [as _courses] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:27:5)

This is my code:

const menu = {

  _courses: {

    appetizers: [],

    mains: [],

    desserts: [],

  },

  get appetziers() {

    return this._courses.appetizers;

  },

  get mains() {

    return this._courses.mains;

  },

  get desserts() {

    return this._courses.desserts;

  },

  set appetizers(appetizers) {

    this._courses.appetizers = appetizers;

  },

  set appetizers(mains) {

    this._courses.mains = mains;

  },

  set appetizers(desserts) {

    this._courses.desserts = desserts;

  },

  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) {

    let dishes = this._courses[courseName];

    let randomIndex = math.floor(math.random() * dishes.length);

    return dishes[randomIndex];

  },

generateRandomMeal: function() {

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

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

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

  const totalPrice = appetizer.price + main.price + dessert.price;

  return `You're order was ${appetizer.name}, ${main.name} and a ${dessert.name} dessert. The total price is: $${totalPrice}`;

}

};

menu.addDishtoCourse('appetizers', 'salmon', 5);

menu.addDishtoCourse('appetizers', 'appricot', 4.12);

menu.addDishtoCourse('appetizers', 'salad', 3);

menu.addDishtoCourse('mains', 'beef', 10);

menu.addDishtoCourse('mains', 'chicken', 9);

menu.addDishtoCourse('mains', 'lion', 55);

men[quote="zakarisnagy678684831, post:1, topic:532506, full:true"]
Hi! Currently I am trying to get trough the Meal Maker project...
Apparently I have the same code as in the walktrough video but that does not work for me.
Anything I do I get this error message: 
/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:27
    return {
    ^

RangeError: Maximum call stack size exceeded
    at Object.get _courses [as _courses] (/home/ccuser/workspace/learn-javascript-objects-meal-maker/app.js:27:5)
   ....

This is my code:


const menu = {

  _courses: {

    appetizers: [],

    mains: [],

    desserts: [],

  },

  get appetziers() {

    return this._courses.appetizers;

  },

  get mains() {

    return this._courses.mains;

  },

  get desserts() {

    return this._courses.desserts;

  },

  set appetizers(appetizers) {

    this._courses.appetizers = appetizers;

  },

  set appetizers(mains) {

    this._courses.mains = mains;

  },

  set appetizers(desserts) {

    this._courses.desserts = desserts;

  },

  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) {

    let dishes = this._courses[courseName];

    let randomIndex = math.floor(math.random() * dishes.length);

    return dishes[randomIndex];

  },

generateRandomMeal: function() {

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

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

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

  const totalPrice = appetizer.price + main.price + dessert.price;

  return `You're order was ${appetizer.name}, ${main.name} and a ${dessert.name} dessert. The total price is: $${totalPrice}`;

}

};

menu.addDishtoCourse('appetizers', 'salmon', 5);

menu.addDishtoCourse('appetizers', 'appricot', 4.12);

menu.addDishtoCourse('appetizers', 'salad', 3);

menu.addDishtoCourse('mains', 'beef', 10);

menu.addDishtoCourse('mains', 'chicken', 9);

menu.addDishtoCourse('mains', 'lion', 55);

menu.addDishtoCourse('desserts', 'tiredmisu', 15);

Thanks for any advice.

first, here:


  set appetizers(appetizers) {

    this._courses.appetizers = appetizers;

  },

  set appetizers(mains) {

    this._courses.mains = mains;

  },

  set appetizers(desserts) {

    this._courses.desserts = desserts;

  },

seems you went copy pasting and then forgot to rename the setters.

as for your error, when access the appetizers getter appetizer:

menu.appetizers

within the getter we have:

return this._courses.appetizers;

this._courses will invoke the _courses getter:

  get _courses() {

    return {

      appetizers: this.appetizers,

      mains: this.mains,

      desserts: this.desserts,

    };

  },

then within the _courses getter, you try to access the appetizers property (this.appetizers). Which will invoke the appetizers getter. Which in its turn will invoke the _courses getter and so forth

until JS is like: well, that is it. You reached the maximum depth.

2 Likes

I might be very tired for this now. But still don’t get it. So what do I change?
What is still weird for me that in the walktrough video they have the same code and it works.

Not exactly, the difference is subtle when it comes to the difference (1 symbol to be exact), but the consequence in behavior is quite large. Which is why its so important to understand the problem.

you would need to get rid of the getters calling each other. Do you want the appetizers getter to call/invoke your courses getter?

do you understand what leads to recursion when working with getters?

2 Likes

Thanks for helping.
Btw I am still lost with it.
I could sit here one more week and still wont figoure this out.

you are not picking up on the thinking steps I would like you to try. You didn’t answer my questions. You just say you don’t know

I could also just give you the answer, if that is what you rather have? saves me a lot of time, but you learn less.

1 Like

Well… To be honest. Its not a public school. I am doing it by my own motivation. Means I went trough all of it before writing a question here.
I am still missing something. Maybe from the solution I could understand all of it. For now I dont. I will go at it once more and then leave this project.

What I have found is that the getter method shares the same name as the property. Hopefully this will solve it.

yes, but then you miss the crucial step: Teaching yourself to solve this problem. Which is so essentially in programming.

good find :slight_smile:

2 Likes

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