TypeError：数据不可迭代，在嵌套数组上使用 ngfor

Question

 rowData= [{ "label": "president", "contestants": [{ "name": "john key", "votes": 2 }, { "name": "john hi", "votes": 1 }, { "name": "john kl", "votes": 1 }] }, { "label": "organizer", "contestants": [{ "name": "michael skie", "votes": 3 }, { "name": "michael e", "votes": 1 }] }, { "label": "secretary", "contestants": [{ "name": "sampson eons", "votes": 2 }, { "name": "sampson mji", "votes": 2 }] }]

I have a rowData which looks like this and I want to dynamically create multiple bar charts with the results using NGFOR

 <div *ngIf="rowData.length >0"> <div *ngFor="let arr of rowData let i=index"> <div *ngFor="let elm of arr.contestants"> <ngx-charts-bar-vertical [view]="view" [scheme]="colorScheme" [results]="elm" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" (select)="onSelect($event)"> </ngx-charts-bar-vertical> </div> </div> </div>

I get an error that data is not iterable. Can someone help me

Answer 1

I solved it by rearranging the json

 rowData = [ [{ "label": "president", "contestants": [{ "name": "john key", "votes": 2 }, { "name": "john hi", "votes": 1 }, { "name": "john kl", "votes": 1 }] }, { "label": "organizer", "contestants": [{ "name": "michael skie", "votes": 3 }, { "name": "michael e", "votes": 1 }] }, { "label": "secretary", "contestants": [{ "name": "sampson eons", "votes": 2 }, { "name": "sampson mji", "votes": 2 }] }] ]

 <div *ngIf="rowData.length >0"> <div *ngFor="let arr of rowData let i=index"> <div *ngFor="let elm of arr.contestants"> <ngx-charts-bar-vertical [view]="view" [scheme]="colorScheme" [results]="elm" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" (select)="onSelect($event)"> </ngx-charts-bar-vertical> </div> </div> </div>

I moved the results rowData[0]; and it solved my problem