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

Question

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 class="d-flex custom-control align-items-center" *ngFor="let number of numbers">
              <i class="fa-solid fa-circle-check mr-2"></i>
              <p class="ingred-paragraph">
                {{ 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 ?

Does this answer your question? [How to iterate object keys using \*ngFor](https://stackoverflow.com/questions/41396435/how-to-iterate-object-keys-using-ngfor) — Eldar, Jun 10 '22 at 13:21
Thank you for your reply but The properties have the same name and different iteration like Ingredient1:"eggs", ingredient2:"milk" etc. I don't want to call each of them alone, instead i want to write ingredient then concatenate it with an number — Nano, Jun 10 '22 at 13:25

Meqwz · Answer 1 · 2022-06-10T16:34:01.257

0

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')" class="d-flex custom-control align-items-center">
  <i class="fa-solid fa-circle-check mr-2"></i>
  <p class="ingred-paragraph">
   {{ recipeProperty.value}}
  </p>
  </div>
</ng-container>

edited Jun 10 '22 at 16:34

answered Jun 10 '22 at 13:31

Meqwz

1,319
8
14

I only have one recipe because im trying to show recipe detail like it's own ingredients – Nano Jun 10 '22 at 13:33
@ElmourabitiNadia Okay, updated, does that answer your question? If not, I need more detail about what you're trying to do. Maybe post an example of the output you expect? – Meqwz Jun 10 '22 at 13:37
Thank you for your reply, I think I was not clear enough, because the api has other properties like name, id etc. and I only wanna get some of the properties that have the same name at the beginning but different iteration property1, property2 .... – Nano Jun 10 '22 at 15:54
@ElmourabitiNadia Yeah, I have no idea what you're trying to do. If you want help, please clarify your question. – Meqwz Jun 10 '22 at 16:07
I edited my question if you'd like to read again. Thank you for your time. – Nano Jun 10 '22 at 16:13

Charlie V · Answer 2 · 2022-06-10T18:07:07.930

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 class="d-flex custom-control align-items-center">
  <i class="fa-solid fa-circle-check mr-2"></i>
  <p class="ingred-paragraph">
   {{ 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.

Thank you for your reply, I think I was not clear enough, because the api has other properties like name, id etc. and I only wanna get some of the properties that have the same name at the begining but different iteration property1, property2 .... — Nano, Jun 10 '22 at 15:54

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

2 Answers2