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

Manipulating Angular and Typescript to utilize the method's parameter value as a JavaScript object's value

What is the best way to loop through an array that contains a custom data type

The error `TypeError: Unable to access properties of an undefined value (reading 'authService')` occurred

Typescript: Implementing the 'types' property in a function returned from React.forwardRef

Error message: "Unable to locate HTML container when trying to create a child element in am

Give it a little time before uploading a widget onto the page

Passing Parent Method to Child Component in React Native

What is the method to insert a new <input> element after the last input field has been filled in

Every time I attempt to make an HTTP request, I encounter a cross-origin error

Sending an onclick event to a child class through React and TypeScript

Implementing OpenID Connect with Angular Single Page Application and Asp.Net Core 3.1 Backend

Ionic app: refresher functionality works in browser but not on iOS home screen app

Using TypeORM: Implementing a @JoinTable with three columns

Creating a realistic typewriter effect by incorporating Code Block as the input

angular index.html code displayed

Troubleshooting the "invalid configuration" error when using Angular CLI to create a new app

Is there a way to dynamically adjust the size of mat dialog content to match the size of the mat dialog in

Testing Slack's Web API with Jest for mock purposes

Avoid selecting primary key column in TypeORM查询

The 'mat-table' component is triggering an error indicating that the 'dataSource' attribute is unrecognized in the table