How to iterate object in angular2

Question

Below is 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 I am using below code to display the 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 I am getting below result.

Ouput here

Is there any best way by which i can do iterate dynamically?

Use `Object.keys()` to get the properties and then iterate over them and use them to access the values like shown in https://stackoverflow.com/a/41396558/217408 — Günter Zöchbauer, Jul 25 '17 at 10:48

Slava Utesinov · Answer 1 · 2017-07-25T11:14:07.530

Try this approach, also you should use this custom "keys" pipe:

<ng-container *ngFor='let category of catagoriesProducts[0].categories; let i = 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>

How to iterate object in angular2

1 Answers1