Angular 7 Extract data from observable

Question

I am new in angular.

i want extract data from an observable. i do that :

validnomi(key : string): void {
  this.demandesnomiftodisplay = 
    this.demandenomisService.getSingleDemandenomis(key).subscribe(val => 

    {const civ = val[0].civ; 
     const datedemande = val[0].datedemande; 
     const nom = val[0].nom; 
     const prenom = val[0].prenom; 

     }
  );
}

my service.ts :

getSingleDemandenomis(key: string){
return this.database.list('/Demandes/DemandesBALnominatives', ref => ref.orderByKey().equalTo(key)).snapshotChanges().pipe(map(actions => {
  return actions.map(a => {
    const data = a.payload.val();
    const key = a.payload.key;
    return {key, ...data };
  });
}));
 }

But i have this error :

property prenom does not exist on type {key : string}
property nom does not exist on type {key : string}
property civdoes not exist on type {key : string}

....

Borys Kupar · Accepted Answer · 2019-03-21 15:38:56Z

2

It looks correct, you just need further to read first element of array and access needed property.

Your service:

getSingleDemandenomis(key: string): Observable<{key: string; datedemande: string}[]> {
   return this.database.list('/Demandes/DemandesBALnominatives', ref => 
       ref.orderByKey().equalTo(key)).snapshotChanges().pipe(map(actions => {
          return actions.map(a => {
              const data = a.payload.val();
              const payloadKey = a.payload.key;
              return {key: payloadKey, ...data };
          });
   }));
 }

Component:

validnomi(key : string) {
    this.demandesnomiftodisplay = this.demandenomisService.getSingleDemandenomis(key)
    .subscribe((val: {datedemande: string}[]) => console.log(val[0].datedemande));
}

edited Mar 21, 2019 at 15:38

answered Mar 21, 2019 at 14:36

Borys Kupar

1,73112 silver badges25 bronze badges

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

6 Comments

Alan ENTEM Over a year ago

i have this error : property 'datedemande" does not exist on type {key : string}

Borys Kupar Over a year ago

@AlanENTEM it looks like you have some wrong types defined. Please check my edited answer for hint.

Borys Kupar Over a year ago

Can you please post the code for your getSingleDemandenomis method too? So I can help you with correct types.

Borys Kupar Over a year ago

I added some a return type for your service, and fixed shallow name issue. Try that. Please consider checking more into TypeScript, to get better familiar with types.

Alan ENTEM Over a year ago

i have type {key : string;}[] is not asssignable to type {key:string, datedemande:string} idon't understand this problem so i can use my fonction correctly but it send me this error

|

Antoine Delia · Accepted Answer · 2019-03-21 14:43:25Z

1

The brackets from your log indicates that you are not getting an object but rather an array of object. Just get the first element of the array and then you will be able to access all the attributes of your object.

Also, you should not use JSON.stringify(), as it turns your array of object into a string.

validnomi(key : string) {
    this.demandesnomiftodisplay = this.demandenomisService.getSingleDemandenomis(key).subscribe(val => 
        // This will get the key from your object
        console.log(val[0].key);
    );
}

edited Mar 21, 2019 at 14:43

answered Mar 21, 2019 at 14:36

Antoine Delia

1,8456 gold badges29 silver badges45 bronze badges

1 Comment

Alan ENTEM Over a year ago

i have this error : property subscribe does not exist on type operatorfunction

thomi · Accepted Answer · 2019-03-21 14:48:36Z

1

I would stick to the observable:

validnomi(key : string) {
  this.demandesnomiftodisplay = 
    this.demandenomisService.getSingleDemandenomis(key).pipe(
    pluck('datademande')
  ).subscribe(val => console.log(val));

Here's a StackBlitz to illustrate.

answered Mar 21, 2019 at 14:48

thomi

1,6972 gold badges26 silver badges35 bronze badges

1 Comment

Grégory Elhaimer Over a year ago

That should be the way to go IMHO. I removed my answer as pluck seems to be a better match for the case. Get my upvote

Collectives™ on Stack Overflow

Angular 7 Extract data from observable

3 Answers 3

6 Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

1 Comment

Related