Wait till function completes and return Angular 6

Question

How can i make the subscribe wait till my logic completes and transform returns the updated keys object ?

transform(value: any, args:string) : any {
    let keys = [];

    this.http.get('src/app/enum-data/enum.json').subscribe(data => {

      this.List = data;
      // Logic here (data vs value)
      for (var enumMember in value) {
        if (!isNaN(parseInt(enumMember, 10))) {
          keys.push({key: enumMember, value: value[enumMember]});
        } 
      }
    },
      err => {
        console.log(err);
      });

    return keys;

  }

HTML:

  <select>
          <option *ngFor="let item of gendersEnum | keys: 'gender'" [value]="item.key">{{item.value}}</option>
  </select>

This is a pipe module. Tried returning keys within the subscribe but still the same issue.

What does pipe module refer to in this context? Are you writing your own Angular pipe? angular.io/guide/pipes — Keenan Diggs
– Keenan Diggs, Commented Jul 22, 2019 at 7:25

Martin Choraine · Accepted Answer · 2019-07-22 12:06:29Z

5

Don't subscribe your Observable here. Just map the response with RxJs operators and subscribe when calling transform(...).

transform(value: any, args: string): Observable<any> {
        return this.http.get('src/app/enum-data/enum.json').pipe(
            map(data => {
                let keys = [];
                // Logic here (data vs value)
                for (const enumMember in value) {
                    if (!isNaN(parseInt(enumMember, 10))) {
                        keys.push({key: enumMember, value: value[enumMember]});
                    }
                }
                return keys;
            })
        );
    }

A better approach is to use async pipe to let angular subscribe and unsubscribe your observable :

 <select>
          <option *ngFor="let item of gendersEnum | keys: 'gender' | async" [value]="item.key">{{item.value}}</option>
  </select>

edited Jul 22, 2019 at 12:06

answered Jul 22, 2019 at 7:25

Martin Choraine

2,4513 gold badges24 silver badges38 bronze badges

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

4 Comments

A Coder Over a year ago

updated the question where i'm using the pipe, how can i use the async pipe? just by adding async in the html?

Martin Choraine Over a year ago

In your component typescript you need to assign your observable to the class (with this) then in your template #ngFor="let item of (yourObservable | async)"

Martin Choraine Over a year ago

You can learn more here : blog.angularindepth.com/…

A Coder Over a year ago

It gets me InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' when tried to use the async pipe like this, *ngFor="let item of (gendersEnum | async) | keys: 'gender'"

Sameer · Accepted Answer · 2019-07-22 07:27:56Z

0

Made some changes in method.

transform(value: any, args:string) : Observable<any>{
  return this.http.get('src/app/enum-data/enum.json').map(data => {
     let keys = [];
      this.List = data;
      // Logic here (data vs value)
      for (var enumMember in value) {
        if (!isNaN(parseInt(enumMember, 10))) {
          keys.push({key: enumMember, value: value[enumMember]});
        } 
      }
      return keys;
    },
      err => {
        console.log(err);
      });

  }```
Now you can subscribe Your translation method.

answered Jul 22, 2019 at 7:27

Sameer

1291 silver badge9 bronze badges

Collectives™ on Stack Overflow

Wait till function completes and return Angular 6

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related