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.
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> 
Comments
Post a Comment