CODEWITHSUNDEEP
arraysangularfirebaseangularfire2
Newbiiiie
Newbiiiie

Reputation: 1491

AngularFire Firebase transform array from observable

I use angular CLI, angularFire and Firebase.

I have this data in realdatabase :

enter image description here I get data from firebase with an observale :

//Service.ts

import { Injectable } from '@angular/core';
import { Patient } from '../models/patient.model';
import {PPS } from '../models/pps.model';
import { AngularFireDatabase, AngularFireList, AngularFireObject} from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class PPSsService {
ppss: AngularFireList<any>;

constructor(private database: AngularFireDatabase) {this.ppss = database.list('ppss');}

getPPSByPatientid(Patientid: string){
return this.database.list('/ppss', ref => ref.orderByChild("Patientid").equalTo(Patientid)).valueChanges();
}  
}

// component.ts 

export class PpsComponent implements OnInit {

 patientid: string;
 patientToDisplay;
 diagnosticsToDisplay;
 ppssToDisplay;
 traitement: string;
 data1: any[];
 config1: GanttChartConfig;
 elementId1: string;

constructor( 
    private route: ActivatedRoute, 
    private location: Location,
    private patientsService: PatientsService,
    private diagnosticsService: DiagnosticsService,
    private ppssService: PPSsService,
    private router: Router, 
    public dialog: MatDialog, 
    ){ }


  ngOnInit() {

   this.route.params.forEach((urlParameters) => {
   this.patientid = urlParameters['id']; });
   this.patientToDisplay = this.patientsService.getSinglePatient(this.patientid);
   this.diagnosticsToDisplay = this.diagnosticsService.getDiagnosticByPatientid(this.patientid);
   this.ppssToDisplay = this.ppssService.getPPSByPatientid(this.patientid);
 console.log(this.ppssToDisplay);

 this.data1 = [[ 'traitement','start', 'end'],
   [ 'Chirurgie',  new Date(2017, 3, 29), new Date(2017, 3, 30)],
   [ 'Chimiothérapie', new Date(2017, 2, 4),  new Date(2018, 2, 4)],
   [ 'Radiothérapie',   new Date(2017, 2, 4),  new Date(2018, 2, 4)]];

    this.config1 = new GanttChartConfig('', '', '',new Date (),new Date ());
    this.elementId1 = 'myGanttChart';
}

And i can display data in my tamplate...

But now i need in my component.ts an array like that :

this.ppssToDisplay = [['typetraitement', 'traitement','datedebut', 'datefin']]

I try to replace data1 by your code but i have an error ppssToDisplay.map is not a fonction...

Upvotes: 0

Views: 581

Answers (1)

alex kucksdorf
alex kucksdorf

Reputation: 2633

You can either use Object.values() or Object.keys().

this.ppssToDisplay.map(obj => Object.keys(obj)) 
// [['typetraitement', 'traitement','datedebut', 'datefin'], ...] 

this.ppssToDisplay.map(obj => Object.values(obj))
// [["-LFw...", "2018-06-...", "2018-06...", ....],...]

You might also be interested to take a look at this previously answered question about .map() for Objects.

EDIT

In response to your comment, you can also do something like this:

let interestingFields = ['typetraitement', 'traitement','datedebut', 'datefin'];
this.ppssToDisplay.map(obj => interestingFields.map(field => obj[field]))
// only the values of your defined fields

Upvotes: 2

Related Questions