Meal Maker, problem with .length?

Get Help JavaScript
#1

Hi, everyone. I’m working on Meal Maker and have encountered a brick wall I can’t seem to break through.

Here’s the code I wrote up. My apologies if it looks a little messy.

let menu = {
  _courses: {
    appetizers: [],
    mains: [],
    desserts: [],
  },
  get appetizers() {
    this._courses.appetizers;
  },
  set appetizers(aIn) {
    this._courses.appetizers = aIn;
  },
  get mains() {
    this._courses.mains;
  },
  set mains(mIn) {
    this._courses.mains = mIn;
  },
  get desserts() {
    this._courses.desserts;
  },
  set desserts(dIn) {
    this._courses.desserts = dIn;
  },
  get courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts
    }
  },
  addDishToCourse (courseName, dishName, dishPrice) {
    const dish = {
      dish: 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];
  },
  generatorRandomMeal() {
    const appetizer = this.getRandomDishFromCourse('appetizers');
    const main = this.getRandomDishFromCourse('mains');
    const dessert = this.getRandomDishFromCourse('deserts');
    const totalPrice = appetizer.price + main.price + dessert.price;
      return `Your meal is ${appetizer.name}, ${main.name}, and ${dessert.name}. The price is ${totalPrice}.`;
  }
};

menu.addDishToCourse('appetizers', 'cheese sticks', 4.50);
menu.addDishToCourse('appetizers', 'fried mushrooms', 2.50);
menu.addDishToCourse('appetizers', 'house salad', 1.50);

menu.addDishToCourse('mains', 'steak', 19.50);
menu.addDishToCourse('mains', 'lobster', 25.00);
menu.addDishToCourse('mains', 'blt', 10.50);

menu.addDishToCourse('desserts', 'flan', 3.50);
menu.addDishToCourse('desserts', 'cheese cake', 5.50);
menu.addDishToCourse('desserts', 'fried ice cream', 8.50);

let meal = menu.generatorRandomMeal();

console.log(meal);

The computer says there’s a TypeError on line 41, under getRandomDishFromCourse. It says the length property is undefined.

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

My biggest problem with coding is typos, but I couldn’t find anything in the code. I looked through the hints and followed the video guide but still can’t figure out what I’m doing wrong.

If anyone sees the solution or has some advice, I’d be happy to hear it. Thank you!

#2

You should take this as an opportunity to trace the code flow of how dishes gets produced.

Log dishes, log the courses, etc, tracing back to the point where you can see exactly where it became undefined. Once you find the root, then you have a target with which to try to work out solutions.

1 Like
#3

Ah, you’re right. dishes is coming up as undefined but menu._courses['appetizers'] logs correctly. Even after I define courseName, it still appears as undefined.

But this is better than the errors I was getting earlier. I’ll keep puzzling this one out and come back with an answer if I can grab one. Thanks for the help!

1 Like
#4

Great! These type of work processes strengthen our skills.

#5

SO TURNS OUT I misspelled desserts way down in my generatorRandomMeal function. These typos are going to absolutely end me.

But that’s why the computer couldn’t figure out how to turn the Sahara into a cheese cake, thus dishes came back as undefined.

Thanks for the help, @toastedpitabread! It was a frustrating problem but I learned a lot about reading through errors and backtracking through code.

#6

I’m a little clumsy with my typing too! Sometimes I’ll just run a section of code when I’m done with it even if it’s elementary just to make sure I didn’t misspell anything (before I start piling hundreds of lines of more code on top of it :sweat_smile: :sweat_smile:)

Great that you got it!

1 Like
#8

Hey , I am trying to do Meal Maker as well but I am having trouble when logging a meal , because the name of the courses ALWAYS comes out as appetizers and mains as you can see in the pic :

image
image1366×768 71.4 KB

And , here , is the code for it , if anyone can help me out finding where the issue is ! :smiley:

#9

Hi! This project was so difficult and I think the majority of it is because it’s so large. But I suppose that’s half of the point, to teach us to pay attention to tiny details even in huge problems like this.

I looked at your code and took toastedpitabread’s advice of narrowing in on what the problem was and backtracking until I found it.

Your problem is that the output is coming out wrong. If you’re like me, you probably thumbed through the generateRandomMeal function first, but the problem isn’t the function but the inputs. You add courses with the addDishToCourse function and that’s where your little problem lies.

It should be name: dishName, not name: courseName.

The courseName is an argument for the function, not because we want to add it to the arrays every time, but because we want to tell the function where our dish and price should be added to.

I mean, this is more than likely a typo like it was with my issue, but an explanation can’t hurt lol. I hope that fixes it!

1 Like
#10

Hey css , I found this exercise quite difficult aswell and especially cause you need to start tying up things together .and know how they work together. I understand what you’re saying , and I think I can solve it now thank you very mutch :slight_smile:

EDIT : I got my meal maker working and it It seems so obvious now ^^

Some advices are really usefull because they teach you how to “fish” the problem.

give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime

1 Like