Using value from http get inside PipeTransform in angular 10

user_14614121 0
Viewed 194

I am creating an APP that has a PipeTransform that gets a specific character set typed by the customer and transforms it into a link.

New character set needs to do an HTTP get to get Id and Name of the user, so I can get these data but when trying to create a link outside _HttpService.get return Undefined value.

How can I use these values, userId, and userName, outside _HttpService.get?

Updated the post, when I have to search data from DB return undefined.

transform(value: any): SafeHtml {
    
    // Return undefined
    if (this._PatternService._Pattern__tagVisitG.test(value)) {
        this.email = value.match(this._PatternService._Pattern__tagVisit)[2];

        this._HttpService.get(`${ServerUrl.ApiUrl}tag/email/${this.email}`)
            .pipe(map(data => {
                this.result = data;
                this.userId = this.result.response[0]._id;
                this.userName = this.result.response[0].name;
                this.newValue = value.replace(this._PatternService._Pattern__tagVisit, `<a href="#" id="visitLink" data-id=${this.userId}/>${this.userName}</a>`);
            })
            );

        // return undefind
        console.log(this.newValue);
    }

    // Pipe create link to copy post number, it is working
    else if (this._PatternService._Pattern__tagCorreiosG.test(value)) {
        this.correios = value.match(this._PatternService._Pattern__tagCorreios)[2];
        this.correiosLink = `<a href="#" id="correiosLink" data-correios=${this.correios}>${this.correios}</a>`;
        this.newValue = value.replace(this._PatternService._Pattern__tagCorreios, this.correiosLink);
    }

    // Return value when there is no tag, it is working
    else {
        this.newValue = value;
    }

    return this._DomSanitizer.bypassSecurityTrustHtml(this.newValue);
}
angular-pipe angular
1 Answers

How can I use these values, userId, and userName, outside _HttpService.get within the same function?

Answer: you can't. You have to chain logic at the observable if you want to use its returned values. The code outside of the observable gets executed first. Then (whenever the observable resolves) the code chained at the observable gets executed (as long as you subscribe somewhere):

UserId and UserName get set after you arrive at this passage of your code:

 **=> Using console.log here return Undefined**
    console.log(this.userId);

This is why this.userId is still undefined when you log it. The only reasonable way to operate here is to return an observable:

   transform(value: any): Observable<SafeHtml> {
    if (this._PatternService._Pattern__tagVisitG.test(value)) {
      this.email = value.match(this._PatternService._Pattern__tagVisit)[2];

      return this._HttpService
        .get(`${ServerUrl.ApiUrl}tag/email/${this.email}`)
        .pipe(
          map(data => {
            this.result = data;
            this.userId = this.result.response[0]._id;
            this.userName = this.result.response[0].name;
            this.newValue = value.replace(
              this._PatternService._Pattern__tagVisit,
              `<a href="#" id="visitLink" data-id=${this.userId}/>${
                this.userName
              }</a>`
            );
            return this._DomSanitizer.bypassSecurityTrustHtml(this.newValue);
          })
        );
    }
  }
user_108621210
Related