Iterate through Object array - *ngFor - Angular 6

Question

Could some one tell me how to iterate below data structure. ii'm trying to load in normal bootstrap table. but failed. so far i tried to for..loop inside an for of loop. but it returns undefined on 'tableData'

i know its silly and duplicate question. but i don't find solution.

{
"parent":{  
      "tableHeading":{  
         "Header1":"ASD",
         "Header2":"QQQ",
         "Header3":"YYY",
         "Header4":"OOO",

      },
      "tableData":[  
         {  
            "Sample_1":"2019-08-19T00:00:00",
            "Sample_2":"Johney",
            "Sample_3":"30",
            "Sample_4":"PA,

         },
         {  
            "Sample_1":"2019-08-19T00:00:00",
            "Sample_2":"Allen P",
            "Sample_3":"29",
            "Sample_4":"SA",

         },
         {  
            "Sample_1":"2019-08-19T00:00:00",
            "Sample_2":"Chris",
            "Sample_3":"28",
            "Sample_4":"MM",

         }
      ]
   }
}

Possible duplicate of [How to iterate over a JavaScript object?](https://stackoverflow.com/questions/14379274/how-to-iterate-over-a-javascript-object) — Jaydeep, Sep 17 '19 at 14:27
Possible duplicate of [How do I loop through or enumerate a JavaScript object?](https://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object) although I just noticed `*ngFor`, so pardon if this doesn't help. Can you clarify your intent with an example HTML snippet that you're adding the directive to? See [this](https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor). — ggorlen, Sep 17 '19 at 14:27
Possible duplicate of [How to loop over object properties with ngFor in Angular](https://stackoverflow.com/questions/45819123/how-to-loop-over-object-properties-with-ngfor-in-angular) — nash11, Sep 17 '19 at 14:36

score 1 · Accepted Answer · edited Sep 18 '19 at 08:53

1

Try like this:

<table border="1">
    <tr>
        <td *ngFor="let head of data.parent.tableHeading |keyvalue">
            {{head.value}}
        </td>
    </tr>
    <tr *ngFor="let item of data.parent.tableData">
        <td *ngFor="let element of item | keyvalue">
            {{element.value}}
        </td>
    </tr>
</table>

Working Demo

edited Sep 18 '19 at 08:53

Tony Ngo

19,166
4
38
60

answered Sep 17 '19 at 14:32

Adrita Sharma

21,581
10
69
79

1

Why the downvotes? This is a perfectly working solution with a Stackblitz demo... – Jeremy Thille Sep 17 '19 at 14:53
1

@AdritaSharma your solution correct. but i've used some way to render data. thanks for your time – Mr. Learner Sep 18 '19 at 08:02

Iterate through Object array - *ngFor - Angular 6

1 Answers1