Cannot read property 'length' of undefined...Although the object is defined

Question

First I have the following code section:

export default class Recipe {
  constructor(recID) {
    this.RecipeID = recID;
  }

  async GetRecipe() {
    try {
      let Result = await Axios(
        `https://forkify-api.herokuapp.com/api/get?rId=${this.RecipeID}`
      );
      this.Tilte = Result.data.recipe.title;
      this.Author = Result.data.recipe.publisher;
      this.Image = Result.data.recipe.image_url;
      this.Url = Result.data.recipe.source_url;
      this.Ingredients = Result.data.recipe.ingredients;
      this.PublisherUrl = Result.data.recipe.publisher_url;
      this.Rank = Result.data.recipe.social_rank;
    } catch (error) {
      alert(error);
    }
  }

  CalculateTime() {
    try {
      this.Time = Math.ceil(this.Ingredients.length / 3) * 15; // error is here
    } catch (error) {
      console.log(this.RecipeID + ": Length Error->"+error);
    }
  }
}

Then I call the above code in a separate file like:

import Recipe from "./Recipe";

const RecipeController = async () => {
  const ID = window.location.hash.replace("#", "");

  if (ID) {
    AppState.Recipe = new Recipe(ID);

    try {
      await AppState.Recipe.GetRecipe();

      AppState.Recipe.CalculateTime();

      console.log(AppState.Recipe);
    } catch (error) {
      alert(error);
    }
  }
};

Now as shown in the following image, that I do get the response of the request & promised is resolved plus there are elements in the 'ingredients' array but sometimes I still get the error "cannot read property 'length' of undefined" when I call the 'CalculateTime()' although the array is now defined and sometimes I don't get any error & it works perfectly fine.Why this random behavior? Even the IDs in the JSON response & the error I logged match i.e. 47746.

Add console.log(Result.data.recipe.ingredients) to GetRecipe() — Barmar
– Barmar, Commented Feb 21, 2020 at 1:30

CertainPerformance · Accepted Answer · 2020-02-21 01:34:55Z

This is one reason why having too many try/catches can obscure the causes of errors, making debugging difficult. The problem can be reduced to the following:

class Recipe {
  constructor(recID) {
    this.RecipeID = recID;
  }
  async GetRecipe() {
    let Result = await fetch(
      `https://forkify-api.herokuapp.com/api/get?rId=47746`
    ).then(res => res.json());
    console.log(Result); // <----- look at this log
    this.Tilte = Result.data.recipe.title;
    // on the above line, the error is thrown
    // Cannot read property 'recipe' of undefined
  }
}
const r = new Recipe();
r.GetRecipe();

See the log: your Result object does not have a .data property, so referencing Result.data.recipe throws an error. Try Result.recipe instead:

class Recipe {
  constructor(recID) {
    this.RecipeID = recID;
  }
  async GetRecipe() {
    let Result = await fetch(
      `https://forkify-api.herokuapp.com/api/get?rId=47746`
    ).then(res => res.json());
    const { recipe } = Result;
    this.Tilte = recipe.title;
    this.Author = recipe.publisher;
    this.Image = recipe.image_url;
    this.Url = recipe.source_url;
    this.Ingredients = recipe.ingredients;
    this.PublisherUrl = recipe.publisher_url;
    this.Rank = recipe.social_rank;
  }

  CalculateTime() {
    this.Time = Math.ceil(this.Ingredients.length / 3) * 15; // error is here
    console.log('got time', this.Time);
  }
}
(async () => {
  const r = new Recipe();
  await r.GetRecipe();
  r.CalculateTime();
})();

Unless you can actually handle an error at a particular point, it's usually good to allow the error to percolate upwards to the caller, so that the caller can see that there was an error, and handle it if it can. Consider changing your original code so that RecipeController (and only RecipeController) can see errors and deal with them - you can remove the try/catches from the Recipe.

Dvid Silva · Accepted Answer · 2020-02-21 01:31:52Z

0

Are you sure some of the responses are not missing ingredients? And calculateTime is always called after getRecipe?

I would add a condition or fallback to prevent errors, as in.

 this.Time = Math.ceil((this.Ingredients || []).length / 3) * 15;

answered Feb 21, 2020 at 1:31

Dvid Silva

1,17213 silver badges25 bronze badges

Comments

Evgenii Klepilin · Accepted Answer · 2020-02-21 01:57:18Z

I would speculate that this "random" behavior can be related to asynchronous code. You need to ensure that the class has Ingredients in place before you calculate. I have a feeling that you should try changing your syntax to a Promise handling using .then() and .catch(), especially since you already use try/catch in your code. This approach will ensure proper resolution of Promise on axios request, and will eliminate "randomness", because you will have a better control over different stages of Promise processing.

let Result = await Axios(
        `https://forkify-api.herokuapp.com/api/get?rId=${this.RecipeID}`
       )
       .then((data) => {
           this.Tilte = data.data.recipe.title;
           this.Author = data.data.recipe.publisher;
           this.Image = data.data.recipe.image_url;
           this.Url = data.data.recipe.source_url;
           this.Ingredients = data.data.recipe.ingredients;
           this.PublisherUrl = data.data.recipe.publisher_url;
           this.Rank = data.data.recipe.social_rank;
           this.Ingerdients = data.data.recipe.ingredient;
       }
       .catch((err) => {
           console.log(err);
           return null;
       });

Collectives™ on Stack Overflow

Cannot read property 'length' of undefined...Although the object is defined

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related