How to loop through an array of objects, loop through each object and push each object into separate arrays for ngFor looping in angular

Question

I am working on an Angular 7 project and I am dealing with an api that returns an array of (recipes)objects on search and I want to get the all ingredients from each object so I can loop through them, get only what I want because each (recipe)object varys from the other

I have tried looping through the initial array of objects and then looped through each individual object and getting only the available ingredients per (recipe)object but I do not know how to push them into separate arrays. Whenever I push, all ingredients from all the objects gets pushed into a single array.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RecipesService } from 'src/app/services/recipes.service';

@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
s: string;
ingArray: any[] = []
measurementsArr = []
nothingFound = false;
itemsFound = false;
searchedData: any[] = [];
searchresults: number;
constructor(private route: ActivatedRoute, private service:RecipesService) { }

ngOnInit() {
this.route.queryParams.subscribe(params=>{
  this.s = params.s;
  console.log(this.s)
})
this.searchDB()
}

searchDB(){
this.service.searchRecipeDB(this.s).subscribe((res:any)=>{
  if(res.meals === null){
    this.nothingFound = true;
  }else{
    this.searchedData = res.meals
    console.log(this.searchedData)
    this.itemsFound = true;
    this.searchresults=this.searchedData.length;
    let resultsarray = this.searchedData
    for(let y of resultsarray){ 
      for(let obj in y){ 
        if(obj.includes('strIngredient')){ 
          if(y[obj]!=null){ 
            if(y[obj].length > 0){ 
              this.ingArray.push(y[obj])  
              console.log(this.ingArray) 
            }
          }
        }
      }
    }
   }
  })


}

}

I have been able to loop through and get each ingredients from each (recipe)object but have been unable to push them into separate arrays without having to define multiple arrays. Is there a way I can push all ingredients from a (recipe)object into a separate array without having other ingredients from other (recipes)object added? I do not want to define several arrays because I am working with an api and I do not know the expected search results all the time search results showing an array of objects

can you share the search result data structure or share a sample result in json format? — than
– than, Commented Jun 5, 2019 at 21:27
too long but can you check this link ->i.sstatic.net/s6IWU.png — Michael Ashefor
– Michael Ashefor, Commented Jun 5, 2019 at 21:38

Daniel Prosianikov · Accepted Answer · 2019-06-05 20:35:26Z

1

for(let y of resultsarray){
     ingrSub: Array<any> = new Array();
      for(let obj in y){ 
        if(obj.includes('strIngredient')){ 
          if(y[obj]!=null){ 
            if(y[obj].length > 0){ 
              ingrSub.push(y[obj])  
              console.log(this.ingArray) 
            }
          }
        }
      }
    if(ingrSub.length > 0)
          this.ingArray.push(ingrSub)
    else
       ingrSub = null;//just to be sure that we do not leak the memory if engine thinks the oposite in some case

    }

answered Jun 5, 2019 at 20:35

Daniel Prosianikov

1181 gold badge1 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Ashefor Over a year ago

thanks but using an ngfor still displays all the ingredients and not each recipe's ingredient

Michael Ashefor Over a year ago

but please can you explain what ingrSub: Array<any> = new Array() does?

Daniel Prosianikov Over a year ago

Sure, it declares new local array object, but not as a class member. Then you fill out this array with your values and add the ref of this array to class member array.

Daniel Prosianikov · Accepted Answer · 2019-06-05 20:09:34Z

0

Just push obj, not y[obj]. Probably, I do not understand the task. And use of instead of in. Or do you wanna get some ingredient substrings from object?

edited Jun 5, 2019 at 20:09

answered Jun 5, 2019 at 20:04

Daniel Prosianikov

1181 gold badge1 silver badge10 bronze badges

5 Comments

Michael Ashefor Over a year ago

pushing obj instead of y[obj] does the same thing. I am trying to push all ingredients for recipe A into an array and then push all ingredients of recipe B into an array too without having to declare two separate arrays

Daniel Prosianikov Over a year ago

Okay, where do you create the second array in your code? You push every recipe to one class member. About which second array are you talking about?

Michael Ashefor Over a year ago

I have just one array because I am working with an api and I do not know how many objects each search will bring so I was wondering if I can keep using that same array over and over again

Daniel Prosianikov Over a year ago

How about two dimension array or map? Each successful search will add a sub array of your data to the class array

Michael Ashefor Over a year ago

please how do I have go about that?

Lahiru Samishka · Accepted Answer · 2019-12-02 10:21:30Z

0

    this.array_a = [] <- this add your array

this.array_b.forEach(array_b_item => {
  array_b_item.new_variable = JSON.parse(
    JSON.stringify(this.array_a)
  ); 
});

you can add values indivualy to array_b

answered Dec 2, 2019 at 10:21

Lahiru Samishka

1199 bronze badges

Collectives™ on Stack Overflow

How to loop through an array of objects, loop through each object and push each object into separate arrays for ngFor looping in angular

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related