Angular 5 nested arrays

Question

I am trying to use ngfor on a nested json output. The first loop is working fine but the inner loop is not working. My code is

Ts file

import { Component, OnInit } from '@angular/core';
import { TiffinService } from '../tiffin.service';
import { IVen } from '../vendor';

@Component({
  selector: 'app-tabletest',
  templateUrl: './tabletest.component.html',
  styleUrls: ['./tabletest.component.css']
})
export class TabletestComponent implements OnInit {
  vend: IVen[];

  constructor(private apiService: TiffinService) { }

  ngOnInit(){
    this.apiService.getVendor('1')
          .subscribe(
          resultArray => {
          this.vend = resultArray;
        });
  }
}

output of the service is

[{"Cat":[{"Catname":"Daily","Catprice":15.99},{"Catname":"Weekly","Catprice":99.99}],"Vaddress1":"vad1","Vaddress2":"vad2","Vcell":"123456789","Vcity":"milton","Vemail":"[email protected]","Vid":1,"Vname":"vendor1","Vpcode":"l9t0p2","Vphone":"123456789"},{"Cat":[{"Catname":"Daily","Catprice":15.99},{"Catname":"Weekly","Catprice":110.99}],"Vaddress1":"vad1","Vaddress2":"vad2","Vcell":"123","Vcity":"milton","Vemail":"[email protected]","Vid":2,"Vname":"vendor2","Vpcode":"l9","Vphone":"123"}]

html file is

<div *ngFor="let item of vend">
   <table>

      <ng-container>
        <tr>
          <td colspan="2">{{item.Vname}}</td>
        </tr>
        <tr *ngFor="let value of vend.Cat">
          <td>{{value.Catname}}</td>
        </tr>
      </ng-container>
   </table>
<div>

marc_s · Accepted Answer · 2018-11-23 19:38:19Z

1

You need to access item.Cat instead of vend which is retrieved from the parent loop

<div *ngFor="let item of vend">
   <table>    
      <ng-container>
        <tr>
          <td colspan="2">{{item.Vname}}</td>
        </tr>
        <tr *ngFor="let value of item.Cat">
          <td>{{value.Catname}}</td>
        </tr>
      </ng-container>
   </table>
<div>

STACKBLITZ DEMO

edited Nov 23, 2018 at 19:38

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Nov 17, 2018 at 6:59

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

Angular 5 nested arrays

Ts file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Ts file

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related