Reputation: 37
I want to transform an observable into a table. I can display a table by searching on the zero line but I would like to browse all the rows to retrieve all the values. How can I iterate over all lines instead of just getting the first value? thank you
export class DataComponent implements OnInit {
constructor(private router: Router,public authService: AuthService,public dataService: DatasService) { }
HygroS3;
HygroS4;
HygroS5;
date;
datatodisplay2;
datatodisplay;
data1 : any [];
config1: GanttChartConfig;
elementId1: string;
ngOnInit() {
this.datatodisplay = this.dataService.getDatas();
let interestingFields =['date','HygroS3','HygroS4','HygroS5'];
this.datatodisplay.subscribe(val => {
this.HygroS3 = val[0].HygroS3;
this.HygroS4 = val[0].HygroS4;
this.HygroS5 = val[0].HygroS5;
this.date = val[0].date;
this.data1=[['date','HygroS3','HygroS4','HygroS5'],[this.date,this.HygroS3,this.HygroS4,this.HygroS5]]
console.log(this.data1);
});
this.config1 = new GanttChartConfig(new Date (),0,0,0);
this.elementId1 = 'myGanttChart';
}
i obtain this :
Array(2)
0: (4) ["date", "HygroS3", "HygroS4", "HygroS5"]
1: (4) ["24032019170117", 92, 85, 63]
Upvotes: 0
Views: 126
Reputation: 38
Assuming you have a class like this to represent the return value of DatasService.getData()
:
class DataToDisplay {
date: Date | string;
HygroS3: number;
HygroS4: number;
HygroS5: number;
}
you can simplify your ngOnInit
implementation quite a bit and just store the objects directly
data: DataToDisplay[] = [];
ngOnInit() {
this.dataService.getDatas().subscribe((dataResponse: DataToDisplay[]) => { // assuming dataResponse is an array of your object
this.data = dataResponse;
});
this.config1 = new GanttChartConfig(new Date (),0,0,0);
this.elementId1 = 'myGanttChart';
}
in your template you can reference it cleanly like so:
<table>
<tr>
<th>Date</th>
<th>HygroS3</th>
<th>HygroS4</th>
<th>HygroS5</th>
</tr>
<tr *ngFor="let item of data">
<td>{{item.date}}</td>
<td>{{item.HygroS3}}</td>
<td>{{item.HygroS4}}</td>
<td>{{item.HygroS5}}</td>
</tr>
</table>
Upvotes: 1
Reputation:
Hmm.. I am not sure if I am oversimplifying this situation, or I do not fully understand your question, but assuming that the returned observable val
is an array of objects [{.....}, {.........}], and you want the returned format to be in an array of arrays, [[..],[....]].
ngOnInit() {
this.datatodisplay.subscribe(val => {
const headers = ['date','HygroS3','HygroS4','HygroS5'];
const res = val.map(row => {
return [row['date'], row['HygroS3'], row['HygroS4'], row['HygroS5']];
});
this.data1 = [headers, ...res]
console.log(this.data1);
});
}
This will give you the array in that desired format you mentioned at the end of the question, with the headers being on the first row, and the other values on the subsequent rows.
Upvotes: 1