如何在 angular 7 中使用 ngFor 将嵌套的 json 循环到 ul li

Question

I have a nested json,I need to append that json format into ul li tag using ngFor as per below output format,I can use ngfor loop but I am not getting how to use it.Here is the expected output(hardcoded) in html.Below is the code.

home.component.html

<div class="col-md-3" id="leftNavBar">
  <ul>
    <li class="parentNav">parent1</li>
    <li class="childData">
      <ul>
        <li>child11<span class="pull-right"><input type="checkbox"></span></li>
        <li>child12<span class="pull-right"><input type="checkbox"></span></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li class="parentNav">parent2</li>
    <li class="childData">
      <ul>
        <li>child2<span class="pull-right"><input type="checkbox"></span></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li class="parentNav">parent3</li>
    <li class="childData">
      <ul>
        <li>child3<span class="pull-right"><input type="checkbox"></span></li>
      </ul>
    </li>
  </ul>

</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit { 

    nestedjson:any;
 constructor(private formBuilder: FormBuilder) {


     }

  ngOnInit() {
      this.nestedjson = [{"name":"parent1","value":["child11","child12"]},{"name":"parent2","value":["child2"]},{"name":"parent3","value":["child3"]}];

} 




}

Answer 1

That's very basic. You should try it yourself first.

<div class="col-md-3" id="leftNavBar">
    <ul *ngFor="let nested of nestedjson">
        <li class="parentNav">{{ nested.name }}</li>
        <li class="childData">
            <ul>
                <li *ngFor="let val of nested.value">{{ val }}<span class="pull-right"><input type="checkbox"></span></li>
            </ul>
        </li>
    </ul>
</div>

Stackblitz: https://stackblitz.com/edit/angular-mhtnsd

Answer 2

Try like this:

Working Demo

<div class="col-md-3" id="leftNavBar">
  <ul *ngFor="let item of nestedjson">
    <li class="parentNav">parent1</li>
    <li class="childData">
      <ul>
        <li *ngFor="let child of item.value">{{child}}<span class="pull-right"><input type="checkbox"></span></li>
      </ul>
    </li>
  </ul>
</div>

Answer 3

The solution is the one below. Check stackblitz . Your solution side by side with ngFor.

<div class="col-md-3" id="leftNavBar">
  <ul *ngFor="let parent of nestedJson">
    <li  class="parentNav">{{parent.name}}</li>
    <li class="childData">
      <ul>
        <li *ngFor="let child of parent.value" >{{child}}<span class="pull-right"><input type="checkbox"></span></li>
      </ul>
    </li>
  </ul>
</div>

If you have a JSON string, then you will need to use JSON.parse() to get the object in the format above.