Hold off until the operation finishes executing and then deliver Angular 6

Question

Hold off until the operation finishes executing and then deliver Angular 6

Is there a way to delay the subscribe function until my logic is complete and the transform method has updated the keys object?

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

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

      this.List = data;
      // Implement logic here (comparing 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 involves a custom pipe module. I attempted to return keys within the subscribe, but encountered the same issue.

angular typescript observable subscribe

Answer 1

Answer №1

Instead of subscribing your Observable here, you should map the response using RxJs operators and only 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 = [];
                // Implement 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 more efficient approach is to utilize the async pipe to allow Angular to manage the subscription and unsubscription of your observable:

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

Answer 2

Instead of subscribing your Observable here, you should map the response using RxJs operators and only 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 = [];
                // Implement 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 more efficient approach is to utilize the async pipe to allow Angular to manage the subscription and unsubscription of your observable:

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

Answer 3

Answer №2

Implemented some alterations in the technique.

transformData(value: any, args:string) : Observable<any>{
  return this.http.get('src/app/enum-data/enum.json').map(data => {
     let keys = [];
      this.List = data;
      // Custom 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 implement Your modified method by subscribing.

Answer 4

Implemented some alterations in the technique.

transformData(value: any, args:string) : Observable<any>{
  return this.http.get('src/app/enum-data/enum.json').map(data => {
     let keys = [];
      this.List = data;
      // Custom 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 implement Your modified method by subscribing.

Hold off until the operation finishes executing and then deliver Angular 6

Answer №1

Answer №2

Similar questions

Typescript: Verifying the type of an interface

Resolving parent routes in Angular 2

The requested resource on localhost does not have the 'Access-Control-Allow-Origin' header

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

Struggling to Decode Octet-stream Data in Angular 6 HttpClient: Encountering Parsing Failure with Error Prompt: "Failed to parse HTTP response for..."

The parameter type 'router' cannot be replaced with the type 'typeof ...'. The 'param' property is not included in the type 'typeof'

Caught off guard by this promise: TypeError - Attempting to access a property that does not exist in my Ionic 2 application

Craft fresh items within HTTP request mapping

The automatic filtering feature does not kick in when the sorting is changed

It is possible that the object may be null, as indicated by TS2531 error

What is the best way to retrieve the index of the chosen option from a select element in Angular when

Electron and React: Alert - Exceeded MaxListenersWarning: Potential memory leak detected in EventEmitter. [EventEmitter] has 21 updateDeviceList listeners added to it

How to implement a Typescript interface without necessarily implementing the parent interfaces

Tips on managing both the ionic 3 and ionic 4 versions cohesively on my device

Issue with the code: Only arrays and iterable objects are permitted in Angular 7

Assign a value to a FormControl in Angular 6

Troubleshooting TestBed: Resolving the StatusBar Provider Error

When attempting to parse a file name using a regular expression in TypeScript (or even plain Node.js), the unexpected outcome is a

What is the best way to link labels with input fields located separately in Angular?

What is the best way to update placeholders in Angular 8+?