嵌套的json，需要在angular的帮助下以树结构格式动态显示

Question

I am seeking the below result with nested JSON . I am not able to retrive/call keys and values in template dynamically. Refrence link is attached for detail veiw

Angular Code

let checklist = {
"CS": [
  {
    "id": "1",
    "name": "A"
  },
  {
    "id": "2",
    "name": "B"
  },
  {
    "id": "3",
    "name": "C"
  }
],
"Comment": [
  {
    "id": "1",
    "name": "D"
  },
  {
    "id": "2",
    "name": "E"
  },
  {
    "id": "3",
    "name": "F"
  }
]
}


<div *ngFor="let item of Checklist | Key">
      {{key}}
 <div>{{item}}</div>
 </div>

Desired Result

Answer 1

Use keyvalue pipe to loop over Objects within template, Use some css to modify the display but a code like below will serve your need.

<div *ngFor="let item of checklist | keyvalue">
  <div>
    {{item.key}}
  </div>
  <div>
    <p *ngFor="let eachValue of item.value">
      {{eachValue.name}}
    </p>
  </div>   
</div>

https://stackblitz.com/edit/angular-jgwk8n?file=src%2Fapp%2Fapp.component.html

Edit

For angular version < 6, keyvalue pipe doesn't exist. You can create your own custom pipe, maybe like:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customKeyvalue',
  pure: true     // keyvalue pipe is actually impure, which means this value would be false
})
export class CustomKeyvaluePipe implements PipeTransform {

  transform(inputOb: any): any {
    let returnVal = [];
    for (let eachKey in inputOb) {
      returnVal.push({key: eachKey, value: inputOb[eachKey]})
    }
    return returnVal
  }

}

Now in case your Object changes dynamically without changing its original reference then you would have to make the above pipe as impure (pure: false). This has a downside of being triggered in every change detection.

https://stackblitz.com/edit/angular-jgwk8n?file=src%2Fapp%2Fapp.component.html

Answer 2

You can use Object.keys to get the keys of the object.

---

This is your component:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  public checklist: any;
  public ObjectKeys =  Object.keys;
  name = 'Angular';

    ngOnInit() {

        this.checklist = {
        "CS": [
          {
            "id": "1",
            "name": "A"
          },
          {
            "id": "2",
            "name": "B"
          },
          {
            "id": "3",
            "name": "C"
          }
        ],
        "Comment": [
          {
            "id": "1",
            "name": "D"
          },
          {
            "id": "2",
            "name": "E"
          },
          {
            "id": "3",
            "name": "F"
          }
        ]
      };
    }
}

---

This is the HTML:

<table border="1">
    <tbody>
        <tr *ngFor="let key of ObjectKeys(checklist)">
            <td colspan="2" style="border-right-style: solid; border-width: 1px;"> 
              {{ key }}
            </td>
            <td>
        <div *ngFor = "let entry of checklist[key]">
          {{ entry.name }}
        </div>
            </td>
        </tr>
    </tbody>
</table>

---

This is the result:

You can add CSS to make it look better, but you get the gist now :)

This is the StackBlitz link which you can edit.

Answer 3

The trick here is to use the display: inline-block and vertical-align: top .

It's similar to xyz example.

<div *ngFor="let item of checklist | keyvalue" >
  <div style="display:inline-block;">
    {{item.key}}
  </div>
  <div style="display:inline-block;vertical-align: top;">
    <div *ngFor="let eachValue of item.value" >
      {{eachValue.name}}
    </div>  
  </div>   
</div>

Example: https://angular-hzuexu.stackblitz.io