iterate a complex JSON structure in angular 5

Question

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
}, .... {} ]

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) — sloth, Mar 15 '18 at 10:41
no... its in angular template not in javascript.i suppose both are diffrent — PPB, Mar 15 '18 at 10:45
Possible duplicate of [access key and value of object using \*ngFor](https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor) — Sudheer KB, Mar 15 '18 at 11:52
no.. using pipe only simple json can be accessed, json object containing json arrays return [object obect] for 'Attributes' key — PPB, Mar 15 '18 at 12:50

sloth · Accepted Answer · 2018-11-13T09:06:45.503

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 {}

iterate a complex JSON structure in angular 5

1 Answers1

Linked

Related