How to bind API response (json) to dropdown in Angular4
I am working in an application with angular4. I need to bind a dropdown from the API response data.
I don't know how to get specific data for a specific section from the API.
Here, the API contains category, group and subgroup data. Each group has two subgroups.
I created a stackblitz file for this. Take a look
https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-y6iknh?file=app%2Fapp.component.ts
I am getting an API response here, but I donβt know how to assign values ββto dropdown items.
Can anyone help me to solve this problem.
source to share
You need to bind the data to some variable, parse it into json()
, then you can receive and consume data in its form, as shown
ngOnInit() {
this.CartdataService.get_New_Products().subscribe(
data => {
this.dropdownData = data.json();
console.log(data.json());
});
<div class="col-sm-12" style="margin-top: 20px !important" *ngFor='let data of dropdownData; let i=index'>
<div class="col-sm-12 opt1">
<div class="row">
<h5>
<a class="col-sm-12 font-weight-normal">
{{data?.CAMD_ENTITY_DESC}}
</a>
</h5>
<i class="fa fa-angle-down ind" data-toggle="collapse" [attr.href]="'#collapseExample' + data?.CAMD_ENTITY_DESC"></i>
</div>
</div>
<div class="col-sm-12 collapse opt1" [id]="'collapseExample' + data?.CAMD_ENTITY_DESC"
*ngFor='let group of data?.group; let j=index'>
<div class="row">
<h6>
<p class="dropdown-item col-sm-10">{{group?.CAMD_PRGRP_DESC}} </p>
</h6>
<i class="fa fa-angle-down ind arrow" data-toggle="collapse" [attr.href]="'#innerCollapse' + group?.CAMD_PRGRP_DESC"></i>
</div>
<div class="collapse col-sm-12" [id]="'innerCollapse' + group?.CAMD_PRGRP_DESC">
<div class="row" *ngFor='let subgroup of group?.subgroup; let i=index'>
<h6>
<a class="dropdown-item opt">{{subgroup?.CAMD_PRSGRP_DESC}}</a>
</h6>
</div>
</div>
</div>
</div>
Here is an example working for the same
source to share