AngularFire Firebase transform array from observable

Question

I use angular CLI, angularFire and Firebase.

I have this data in realdatabase :

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...

Try This `this.ppssToDisplay = this.ppssService.getPPSByPatientid(this.patientid).subscribe((dataFromDb) => { return [ [ dataFromDb.typetraitement, dataFromDb.traitement, dataFromDb.datedebut, dataFromDb.datefin ] ] })` — Hari, Jun 27 '18 at 11:49
error TS2322: Type 'Subscription' is not assignable to type 'any[]'. — Newbiiiie, Jun 27 '18 at 12:21

alex kucksdorf · Accepted Answer · 2018-06-27T12:44:10.617

2

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

edited Jun 27 '18 at 12:44

answered Jun 27 '18 at 11:53

alex kucksdorf

2,573
1
15
26

I try to integrate your answer instead of data1, do you think it's the right path? – Newbiiiie Jun 27 '18 at 13:11
Did you import the `.map()` operator from `RxJS`? `import 'rxjs/add/operator/map'` – alex kucksdorf Jun 27 '18 at 13:48
yes, i think i write this : import { map } from 'rxjs/operators/map'; – Newbiiiie Jun 27 '18 at 13:49
Try to replace it with the import from my comment. Or change the code to `this.ppssToDisplay.pipe(map(obj => interestingFields.map(field => obj[field])))` – alex kucksdorf Jun 27 '18 at 13:53
You should also take a look at [the changes between RxJS 5 and 6](https://www.academind.com/learn/javascript/rxjs-6-what-changed/) – alex kucksdorf Jun 27 '18 at 13:54
ok thanks. I have work ! Maybe this can help you and me, i try to follow this tutoriel http://anthonygiretti.com/2017/10/12/using-google-charts-in-angular-4-project-part-2/ – Newbiiiie Jun 27 '18 at 14:00
With"this.data2 =this.ppssToDisplay.pipe(map(obj => interestingFields.map(field => obj[field]))); console.log(this.data2);" this.data2 is an observable you can help me again please ? – Newbiiiie Jun 29 '18 at 09:21

AngularFire Firebase transform array from observable

1 Answers1