CODEWITHSUNDEEP
angulartypescript
Nikhil Radadiya
Nikhil Radadiya

Reputation: 2065

issues with iterating objects in *ngFor in angular2

I have an array in subscribe like this.Term and if I console, it looks like

[Discount Condition:Array(3), Stay Consition:Array(2)]
Discount Condition:Array(3)
0:object
   EventType:"success"
   Heading:"Discount Condition"
   Help:"Terms"
1:object
   EventType:"success"
   Heading:"Discount Condition"
   Help:"Terms"
2:object
   0:object
   EventType:"success"
   Heading:"Discount Condition"
   Help:"Terms"

Stay Condition:Array(2)
0:object
1:object

I'm trying to print it in component html like ,

<div *ngFor="let item of Term">
     {{item.Heading}}
</div>

If I check using inspect elements it says 

<!--template bindings={
  "ng-reflect-ng-for-of": ""
}-->

Here is the function 

getTerms(){
    this.quoteService.getTerms()
    .subscribe(
      terms => {
        this.terms = terms.resultData.Terms;
        this.notes = terms.resultData.ImpNotes;
        this.exclusions = terms.resultData.Exclusions;
        var arr=[];
        var strHeading;
        for(let i=0;i<this.terms.length;i++) {
          strHeading=this.terms[i].Heading;
          if (arr.indexOf(strHeading) >= 0) {
            this.uniqTerm[strHeading].push(this.terms[i]);
          } 
          else {
            if (!this.uniqTerm[strHeading])
               this.uniqTerm[strHeading] = [];
               this.uniqTerm[strHeading].push(this.terms[i]);
               this.Term.push(this.uniqTerm);
               arr.push(strHeading);
          }         
        }        
        console.log(this.Term);
      },
      response => {
        if (response.status == 404) {
          //this.router.navigate(['NotFound']);
        }
      });
  }

Can anyone please point where am I going wrong?

Upvotes: 0

Views: 388

Answers (1)

eko
eko

Reputation: 40677

this.Term appears to be an array of arrays.

something like 

<div *ngFor="let item of Term[0]">
     {{item.Heading}}
</div>

would be a dirty check to see whether your data is correct.

Then if you want to iterate over these arrays;

<div *ngFor="let item of Term">
     <div *ngFor="let elem of item">
           {{elem?.Heading}}
     </div>
</div>

might work.

Upvotes: 1

Related Questions