My goal is to extract data from a Json data model and populate a select box with the data as drop-down items. However, I am encountering difficulties in achieving this as the entire Json array is being printed instead of just the 3 major headings that I want.
Error Message:-ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Below are my sample Json data and the expected output:
Expected Output
LEED V4 BD+C LEED V4 ID+C LEED V4 EBOM
Sample Json Data
{
"Ratings": {
"LEED V4 BD+C": [{
}],
"LEED V4 ID+C": [{
}],
"LEED V4 EBOM": [{
}]
}
}
app.ts
template: `
<div class="col-md-6 form-group">
<label class="control-label">Rating System <span style="color: #2196f3;">*</span></label>
<select class="form-control" id="productparameter" *ngFor="let item of ratings.Ratings" >
<option value="">Select Rating</option>
<option value="">{{item}}</option>
</select>
</div>
`,
})
export class App {
public ratings: any ={
"Ratings": {
"LEED V4 BD+C": [{
}],
"LEED V4 ID+C": [{
}],
"LEED V4 EBOM": [{
}]
}
}
constructor( ) {
console.log( this.ratings.Ratings);
}
Here is the link to my Plunker project for further reference:https://plnkr.co/edit/pgbeS9iRkAzgWVNrLNQJ?p=preview