CODEWITHSUNDEEP
javascriptangularfirebaseobservable
chupi cupa
chupi cupa

Reputation: 37

Transform an observable to an array

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

Answers (2)

Orion K.
Orion K.

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

user10997785
user10997785

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

Related Questions