Pfthb

how to iterate a JSON in angular 5? Have been searching a lot a got a pipe concept but it does not work with complex json something like below . I need to create expandable table using below type of data, I am stuck in reading this json.

data = [{
"Items" : [ 
 "Key" : "9009",
 "type" : "fsdf",
 "name" : "sdfsdfn",
 "spec" : "dsfsdfdsf",
 "Attributes" : 
 "category" : "Mobile",
 "orderDate" : "2019-03-07 14:40:49.2",
 "startDate" : "2019-03-07 14:40:49.2",
 "status" : "CREATED"
 ,
 "characteristics" : [ ],
 "relatedItems" : 
 "contains" : [ "1", "2", "3"]
 ,
 "sellable" : false
, .... ]

You can use Object.keys to get all properties of an object. If you want to use it in an angular template, you have to create a method in your component that wraps it.

Here I hacked together a simple example, using a template to created nested tables.

You'll get the idea:

//our root app component
import Component, NgModule, VERSION from '@angular/core'
import BrowserModule from '@angular/platform-browser'

@Component(
 selector: 'my-app',
 template: `
 <ng-template #table let-obj="obj">
 <table style="border: 1px solid black">
 <thead>
 <tr>
 <td *ngFor="let key of getKeys(obj)">
 key
 </td>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td *ngFor="let value of getValues(obj)">
 <div *ngIf="isValue(value)">
 value
 </div>
 <div *ngIf="!isValue(value)">
 <ng-container *ngTemplateOutlet="table;context:ctx(value)"></ng-container> 
 </div>
 </td>
 </tr>
 </tbody>
 </table>
 </ng-template>

 <div *ngFor="let d of data">
 <ng-container *ngTemplateOutlet="table;context:ctx(d)"></ng-container>
 </div>

 `,
)
export class App 
 data:any;
 constructor() 
 this.data = [ 
 "Key" : "9009",
 "type" : "fsdf",
 "name" : "sdfsdfn",
 "spec" : "dsfsdfdsf",
 "Attributes" : 
 "category" : "Mobile",
 "orderDate" : "2019-03-07 14:40:49.2",
 "startDate" : "2019-03-07 14:40:49.2",
 "status" : "CREATED"
 ,
 "characteristics" : [ ],
 "relatedItems" : 
 "contains" : [ "1", "2", "3"]
 ,
 "sellable" : false
 ];
 
 ctx(obj) 
 return obj ;
 
 getKeys(obj) 
 return Object.keys(obj);
 
 getValues(obj) 
 return Object.values(obj);
 
 isValue(obj) 
 return (obj !== Object(obj));
 


@NgModule(
 imports: [ BrowserModule ],
 declarations: [ App ],
 bootstrap: [ App ]
)
export class AppModule