CODEWITHSUNDEEP
angulartypescriptobservablesubscribe
A Coder
A Coder

Reputation: 3056

Wait till function completes and return Angular 6

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.

Upvotes: 0

Views: 1955

Answers (2)

Martin Choraine
Martin Choraine

Reputation: 2431

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>

Upvotes: 5

Sameer
Sameer

Reputation: 129

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.

Upvotes: 0

Related Questions