Maximum Call Stack Exceeded

Get Help JavaScript
#1

I am getting this error even though I have verified that I have no infinite loops. I have only called things when the project told me to, things like getters and setters. I don’t know why I am getting this and every time I comment something out it comes up with another one of these errors.

const menu = {
  _courses: { 
  appetizers: [],
  mains: [],
  desserts: []
},
  get appetizers() {
    return this._courses.appetizers;
  },
      get mains() {
    return this.course.mains;
  },
          get desserts() {
    return this.course.desserts;
  },

      set appetizers(appetizers) {
        this.courses.appetizers = appetizers;
      },
      set mains(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,
   
   }; 
        console.log(this.addDishToCourse());
this._courses[courseName].push(this.addDishToCourse());
        
  },
     getRandomDishFromCourse: function(courseName) {
    var dishes = this._courses[courseName];
     if (dishes !== undefined) {
       var randomIndex = Math.floor(Math.random() * dishes.length);
      return randomIndex;
     }
  },
  
  generateRandomMeal: function() { //This is the problem.
   var appetizer = this.getRandomDishFromCourse('appetizers');
    var main = this.getRandomDishFromCourse('mains');
    var dessert = this.getRandomDishFromCourse('dessert');
    return 'Your meal is ' + this.appetizers[appetizer].name + ', ' + this.mains[main].name + ', and ' + this.desserts[dessert] + '. The total price is $' + this.totalPrice   + '.'; 
  }
};

menu.addDishToCourse('appetizers', 'Bread Loaf', 4.25);
menu.addDishToCourse('appetizers', 'Caesar Salad', 3.50);
menu.addDishToCourse('appetizers', 'Small Soup', 4.50);
menu.addDishToCourse('mains', 'Steak Dinner', 20.00);
menu.addDishToCourse('mains', 'Spaghetti', 16.00);
menu.addDishToCourse('mains', 'Turkey Dinner', 18.99);
menu.addDishToCourse('desserts', 'Icecream', 5.99);
menu.addDishToCourse('desserts', 'Cookies', 5.99);
menu.addDishToCourse('desserts', 'Jello', 5.99);


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

Project

Error
Error821×357 6.7 KB

#2

Things like that create circular references. Be sure to access the backing variable from inside getters and setters.

2 Likes
#3

I do not fully understand what you said.

#4

What is the declared name of the menu property? _courses. That is the backing variable. So,

this._courses. ...
1 Like
#5

I have been trying to fix this for a while and I can’t figure this out I have looked at the tutorial video, tried increasing the limit, rewriting the code in different ways but nothing has been working for me. I don’t know what to do.

#6

Let’s review the code you have at present. Please paste into a reply (as a code sample </>), along with the URL of the lesson page so we can read the instructions and see our own solution, for insight.

1 Like
#7

I know you told me to change the getters and setters but I couldn’t figure out what to replace their block code 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(appetizers) {
        this._courses.appetizers = appetizers;
      },
      set mains(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,
   
   }; 
           
this._courses[courseName].push(this.dish);
        },
    
        getRandomDishFromCourse: function(courseName) {
    var dishes = this._courses[courseName];
     if (dishes !== undefined) {
       var randomIndex = Math.floor(Math.random() * dishes.length);
        return randomIndex;
     }
  },
  
  generateRandomMeal: function() { 
   var appetizer = this.getRandomDishFromCourse('appetizers');
    var main = this.getRandomDishFromCourse('mains');
    var dessert = this.getRandomDishFromCourse('desserts');
    return 'Your meal is ' + this.appetizers[appetizer].name + ', ' + this.mains[main].name + ', and ' +this.desserts[dessert].name + '. The total price is $' + this.totalPrice   + '.'; 
  }
};


menu.addDishToCourse('appetizers', 'Bread Loaf', '4');
menu.addDishToCourse('appetizers', 'Caesar Salad', '3');
menu.addDishToCourse('appetizers', 'Small Soup', '4');
menu.addDishToCourse('mains', 'Steak Dinner', '20');
menu.addDishToCourse('mains', 'Spaghetti', '16');
menu.addDishToCourse('mains', 'Turkey Dinner', '18');
menu.addDishToCourse('desserts', 'Icecream', '5');
menu.addDishToCourse('desserts', 'Cookies', '5');
menu.addDishToCourse('desserts', 'Jello', '5');


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

Lesson

2 Likes
#8

That will create a circular reference, perhaps?

1 Like
#9

Ah, I didn’t see that

1 Like
#10 
menu = {
  _courses: { 
    appetizers: [],
    mains: [],
    desserts: []
  },
  get courses () {
    return {
      appetisers: this._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.desserts
    }
  }
}

 > menu.courses
<- {appetisers: Array(0), mains: Array(0), desserts: Array(0)}
 > menu.courses.appetisers
<- []
 > 

menu = {
  _courses: { 
    appetizers: [],
    mains: [],
    desserts: []
  },
  get courses () {
    return {
      appetizers: this._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.desserts
    }
  },
  set appetizers (appetizer) {
    this.courses.appetizers.push(appetizer)
  }
}

 > menu.appetizers = 'potato peels'
<- "potato peels"
 > menu.courses.appetizers
<- ["potato peels"]

menu = {
  _courses: { 
    appetizers: [],
    mains: [],
    desserts: []
  },
  get courses () {
    return {
      appetizers: this._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.desserts
    }
  },
  set appetizers (appetizer) {
    this.courses.appetizers.push(appetizer)
  },
  get appetizers () {
    return this.courses.appetizers
  }
}

 > menu.appetizers = 'potato peels'
<- "potato peels"
 > menu.appetizers
<- ["potato peels"]
 >

Now we have a prototype that will enable us to work with the data. We know that we can reach our properties with typical notation while the special methods handle the behind the scenes tasks.