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.
<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>
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"]}];
}
}
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
Try like this:
<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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.