Is there a way to iterate through an interface properties in Angular template?-CodePudding

I am working with TheMealDB API that looks something similar as below to get recipe detail:

 {
         idMeal:number,
        strMeal: string,
        strCategory:string
        strArea: string,
        strInstructions: string,
        strMealThumb: string,
        strIngredient1: string,
        strIngredient2: string,
        strIngredient3: string,
        strIngredient4: string,
        strIngredient5: string,
        strIngredient6: string,
        strIngredient7: string,
        strIngredient8: string,
        strIngredient9: string,
        strIngredient10: string,
        strIngredient11: string,
        strIngredient12: string,
        strIngredient13: string,
        strIngredient14: string,
        strIngredient15: string,
        strIngredient16: string,
        strIngredient17: string,
        strIngredient18: string,
        strIngredient19: string,
        strIngredient20: string,
        strMeasure1: string,
        strMeasure2: string,
        strMeasure3: string,
        strMeasure4: string,
        strMeasure5: string,
        strMeasure6: string,
        strMeasure7: string,
        strMeasure8: string,
        strMeasure9: string,
        strMeasure10: string,
        strMeasure11: string,
        strMeasure12: string,
        strMeasure13: string,
        strMeasure14: string,
        strMeasure15: string,
        strMeasure16: string,
        strMeasure17: string,
        strMeasure18: string,
        strMeasure19: string,
        strMeasure20: string,
    }

that's what they have in the api, I am able to get all the first elements, The issue is with both strIngredient and strMeasure, It dosen't look clean to write down 40 repeated properties in a single page What I am trying to achieve is to only use strIngredient and strMeasure and iterate through them using a single loop, something like this:

   <div  *ngFor="let number of numbers">
              <i ></i>
              <p >
                {{ recipe.strIngredient  number }}
              </p>
      </div>

But it is not working as I expected it to be, is it possible to do that kind of thing ?

CodePudding user response：

You can use the keyvalue pipe to iterate over an object in Angular. Then use an ngIf to check if the key includes the properties you want to iterate.

 <ng-container *ngFor="let recipeProperty of recipe | keyvalue">
  <div *ngIf="recipeProperty.key.includes('strIngredient') || recipeProperty.key.includes('strMeasure')" >
  <i ></i>
  <p >
   {{ recipeProperty.value}}
  </p>
  </div>
</ng-container>

CodePudding user response：

Another approach would be to get the Ingredients and Measures in an Array:

IngredientsAndMeasures = [];

ngOnInit() {
  this.transformMeal();
}
transformMeal(){
  let Ingredients = {};
  let Measures = {};
  for (const [key, value] of Object.entries(this.meal)) {
    if (key.includes('strIngredient')) {
      Ingredients[key.replace('strIngredient', '')] = value;
    }
    if (key.includes('strMeasure')) {
      Measures[key.replace('strMeasure', '')] = value;
    }
  }
  for (let i = 1; i <= 20; i  ) {
    this.IngredientsAndMeasures.push({ "Ingredient": Ingredients[i], "Measure": Measures[i] });
  }
}

and then use this Array in your *ngFor:


<ng-container *ngFor="let I_and_M of IngredientsAndMeasures">

  <div >
  <i ></i>
  <p >
   {{ I_and_M.Ingredient}} - {{ I_and_M.Measure}}
  </p>
  </div>
</ng-container>

Because the Array has now Ingredient and Measure pairs it easier to show.