Search code examples
jsonangularfrontendngfor

How to fetch complex array of object (whose value is gain an array of object) using *ngFor

I'm successful in looping throw object whose value is array of object. Below is the object:

this.testObj2 = {
  nodeFour: [
    { elementOne: "B Street" },
    { elementTwo: "city" },
    { elementThree: "Area-591323" },
    { elementFour: "something" }
  ]
}

I'm able to populate the data in table as shown below: enter image description here

Below is my template code:

 <table class="table">
  <thead>
    <tr>
      <ng-container *ngFor="let obj of testObj2 | keyvalue">
        <ng-container *ngFor="let ts1 of obj.value">
          <th *ngFor="let o of ts1 | keyvalue" scope="col">{{ o.key }}</th>
        </ng-container>
      </ng-container>
    </tr>
  </thead>
  <tbody>
    <tr>
      <ng-container *ngFor="let obj of testObj2 | keyvalue">
        <ng-container *ngFor="let ts1 of obj.value">
          <td *ngFor="let o of ts1 | keyvalue" scope="col">{{ o.value }}</td>
        </ng-container>
      </ng-container>
    </tr>
    <tr>
  </tbody>
</table>

Here is my question: My use case dictates that I should be able to populate multiple tables. I'm stuck on this. I'm assuming *ngFor shall be ideal for this. Below is the sample data structure I have to populate (basically its array of above data structure):

this.testObj3 = [
  {
    nodeFour: [
      { elementOne: "B Street" },
      { elementTwo: "city" },
      { elementThree: "Area-591323" },
      { elementFour: "something" }
    ]
  },
  {
    nodeFive: [
      { elementOnee: "Bla Street" },
      { elementTwoo: "Hondacity" },
      { elementThreee: "someArea-591323" },
      { elementFourr: "somethingIsAlwaysHappening" }
    ]
  }
];

I need to populate this in two different tables, one for "nodeFour" and another for "nodeFive" Below is the template snippet I tried:

  <div>
    <ng-container *ngFor="let TObj2 of testObj3; trackBy: trackByFn;" >
        <table class="table">
            <thead>
                <tr>
                    <ng-container *ngFor="let obj of TObj2 | keyvalue">
                        <ng-container *ngFor="let ts1 of obj.value">
                            <th *ngFor="let o of ts1 | keyvalue" scope="col">{{ o.key }}</th>
                        </ng-container>
                    </ng-container>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <ng-container *ngFor="let obj of TObj2 | keyvalue">
                        <ng-container *ngFor="let ts1 of obj.value">
                            <td *ngFor="let o of ts1 | keyvalue" scope="col">{{ o.value }}</td>
                        </ng-container>
                    </ng-container>
                </tr>
                <tr>
            </tbody>
        </table>
    </ng-container>
</div>

I'm getting error at below line:

<ng-container *ngFor="let ts1 of obj.value">

Below is the error: enter image description here

Can someone please help me on this. In my actual requirement, the data for the above data structure will be fetched from an API at runtime. So the number of tables to be shown will be decided at runtime.

Thanks in advance!

Solution

  • It's a problem with typescript, Angular don't know what kind of object is "object.value" and say you that can not iterate (*).

    You can help typeScript declaring a interface

    export interface TableDef{
  [key: string]:any[]
}

    And declare your variable as

    testObj3:TableDef[];

    Your forked stackblitz

    (*) if you give the value to the object when you declare it, TypeScript don't show the error