javascript - How to iterate object in angular2 -

below categoriesproducts json

catagoriesproducts: any[] = [ {     "categories":[     {         "catagories1":  [         {             "productid": 2,             "productname": "catagories1 product1",             "productcode": "gdn-0023",             "releasedate": "march 18, 2016",             "description": "15 gallon capacity rolling garden cart",             "price": 32.99,             "starrating": 4.2,             "imageurl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"         },         {             "productid": 5,             "productname": "catagories1 product2",             "productcode": "tbx-0048",             "releasedate": "may 21, 2016",             "description": "curved claw steel hammer",             "price": 8.9,             "starrating": 4.8,             "imageurl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_hammer.png"         }]     },     {         "catagories2":  [         {             "productid": 2,             "productname": "catagories2 product1",             "productcode": "gdn-0023",             "releasedate": "march 18, 2016",             "description": "15 gallon capacity rolling garden cart",             "price": 32.99,             "starrating": 4.2,             "imageurl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"         },         {             "productid": 5,             "productname": "catagories2 product2",             "productcode": "tbx-0048",             "releasedate": "may 21, 2016",             "description": "curved claw steel hammer",             "price": 8.9,             "starrating": 4.8,             "imageurl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_hammer.png"         }]     },     {         "catagories3":  [         {             "productid": 2,             "productname": "catagories3 product3",             "productcode": "gdn-0023",             "releasedate": "march 18, 2016",             "description": "15 gallon capacity rolling garden cart",             "price": 32.99,             "starrating": 4.2,             "imageurl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"         },         {             "productid": 5,             "productname": "catagories3 product3",             "productcode": "tbx-0048",             "releasedate": "may 21, 2016",             "description": "curved claw steel hammer",             "price": 8.9,             "starrating": 4.8,             "imageurl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_hammer.png"         }]     }] }]; 

inside component using below code display result.

<tbody>     <tr *ngfor='let categorieslist of catagoriesproducts[0].categories[0].catagories1'>         <td></td>         <td>{{ categorieslist.productname }}</td>         <td>{{ categorieslist.productcode }}</td>         <td>{{ categorieslist.releasedate }}</td>         <td>{{ categorieslist.price }}</td>         <td>{{ categorieslist.starrating }}</td>     </tr>     <tr *ngfor='let categorieslist of catagoriesproducts[0].categories[1].catagories2'>         <td></td>         <td>{{ categorieslist.productname }}</td>         <td>{{ categorieslist.productcode }}</td>         <td>{{ categorieslist.releasedate }}</td>         <td>{{ categorieslist.price }}</td>         <td>{{ categorieslist.starrating }}</td>     </tr>     <tr *ngfor='let categorieslist of catagoriesproducts[0].categories[2].catagories3'>         <td></td>         <td>{{ categorieslist.productname }}</td>         <td>{{ categorieslist.productcode }}</td>         <td>{{ categorieslist.releasedate }}</td>         <td>{{ categorieslist.price }}</td>         <td>{{ categorieslist.starrating }}</td>     </tr> </tbody> 

and getting below result.

ouput here

is there best way can iterate dynamically?

try approach, should use custom "keys" pipe:

<ng-container *ngfor='let category of catagoriesproducts[0].categories; let = index'>     <ng-container *ngfor='let key of category | keys'>         <ng-container *ngif="key=='catagories' + (i + 1)">             <tr *ngfor="let categorieslist of category[key]">                <td></td>                <td>{{ categorieslist.productname }}</td>                <td>{{ categorieslist.productcode }}</td>                <td>{{ categorieslist.releasedate }}</td>                <td>{{ categorieslist.price }}</td>                <td>{{ categorieslist.starrating }}</td>            </tr>         </ng-container>     </ng-container> </ng-container>