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
– Hari, Commented Jun 27, 2018 at 11:49
error TS2322: Type 'Subscription' is not assignable to type 'any[]'. — Newbiiiie
– Newbiiiie, Commented Jun 27, 2018 at 12:21

alex kucksdorf · Accepted Answer · 2018-06-27 12:44:10Z

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, 2018 at 12:44

answered Jun 27, 2018 at 11:53

alex kucksdorf

2,6631 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Newbiiiie Over a year ago

I try to integrate your answer instead of data1, do you think it's the right path?

alex kucksdorf Over a year ago

Did you import the .map() operator from RxJS? import 'rxjs/add/operator/map'

Newbiiiie Over a year ago

yes, i think i write this : import { map } from 'rxjs/operators/map';

alex kucksdorf Over a year ago

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 Over a year ago

You should also take a look at the changes between RxJS 5 and 6

|

Collectives™ on Stack Overflow

AngularFire Firebase transform array from observable

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related