Possibly returning a nested observable: _scalar: false; Definetly returning undefined objects

Question

I'm having an issue where I'm returning _scalar for a value in my object when I should be return the entire object. This one property in my object is stopping my code. The parameters are all return the correct values.

I'm trying to document as much of the code as possible to help understand the problem. I'm as junior as can be so bare with me.

relevant viewmodel (class should be interface which I'll change later):

    export class StandardWaiver {
    id?: number;
    waiverType?: WaiverType;
    duplicateFound?: boolean;
    notFoundInCAP?: boolean;
    policyNumber?: string;
    policyType?: number;
    dateOfLoss?: Date;

Waiver Service:

   export class WaiverSevice {
   privat baseURL = '/xxx/XXX/xxxxxx/';
   constructor(private http: HttpClient) {}

   searchForWaiver(waiverTypeId: number, policyNumber: string, dateOfLoss: Date): any {
    let options = this.setOptionHeaders();

    if (isNotNullOrUndefined(policyNumber) && isNotNullOrUndefined(dateOfLoss)) {
      const duplicateCheck: any = {
        policyNumber,
        dateOfLoss,
      };
      if (waiverTypeId === 1) { return this.http.post(this.baseURL + 
    'Standard/CheckForDuplicateOrCAP', duplicateCheck, options); }
      else if (waiverTypeId === 2) { return this.http.post(this.baseURL + 
    'ICC/CheckForDuplicateOrCAP', duplicateCheck, options); }
      else {
        return null;
       }
     }

   }

    export const standardWaiverFromJSON = (data: any) => {
    let standardWaiver: StandardWaiver;
   standardWaiver.id = isNotNullOrUndefined(data?.id) ? data.id : null;

this is where the code breaks:

    export class CreateNewWaiverModalComponent {

     public opened = false;
 
    standardWaiver: StandardWaiver = new StandardWaiver(); 
    dateOfLoss: Date = null;
    policyNumber: string;
    waiverTypeId: number;
    waiverData: any;

    constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private waiverService: WaiverService) { }

    async searchForDuplicateAndCAP() {
     if (this.waiverTypeId === 1)// standard
    {
      this.waiverData = this.waiverService.searchForWaiver(this.waiverTypeId, this.policyNumber, 
    this.dateOfLoss);

    console.log('DATA: ' + this.waiverData, '; WAIVERTYPEID: ' + this.waiverTypeId, '; 
    POLICYNUMBER: ' + this.policyNumber, '; DATEOFLOSS: ' + this.dateOfLoss, '; STANDARDWAIVER 
    OBJECT: ' + this.standardWaiver);

    this.standardWaiver = standardWaiverFromJSON(this.waiverData);
    }

This is the what I'm returning from the console.log:

    DATA: [object Object] ; WAIVERTYPEID: 1 ; POLICYNUMBER: 1234556654 ; DATEOFLOSS: Thu Jan 31 
    2019 00:00:00 GMT-0500 (Eastern Standard Time) ; STANDARDWAIVER OBJECT: [object Object] 

    ERROR Error: Uncaught (in promise): TypeError: standardWaiver is undefined - firefox browser
    ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'id' of undefined - chrome browser

I have to return this.standardWaiver as a property with values that has (this.waiverTypeId, this.policyNumber, this.dateOfLoss) in the parameters. So far it's not giving me that just [object Object] and I'm not understanding why. I welcome any suggestion, and thank you in advance.

Answer 1

Basically searchForWaiver method(contains observable) is making an ajax call. That means you have to .subscribe to searchForWaiver method so that ajax call will happen. And then you can get the data returned from searchForWaiver method inside .subscribe success callback.

async searchForDuplicateAndCAP() {
    if (this.waiverTypeId === 1)// standard
    {
      this.waiverService.searchForWaiver(this.waiverTypeId, this.policyNumber, 
    this.dateOfLoss).subscribe(
        data => {
            this.waiverData = data;
                console.log('DATA: ' + this.waiverData, '; WAIVERTYPEID: ' + this.waiverTypeId, '; 
    POLICYNUMBER: ' + this.policyNumber, '; DATEOFLOSS: ' + this.dateOfLoss, '; STANDARDWAIVER 
    OBJECT: ' + this.standardWaiver);

            this.standardWaiver = standardWaiverFromJSON(this.waiverData);
       });
    }

One more correction, searchForWaiver method should return Observable from all possible places. Otherwise typescript won't allow you to put subscribe on that method.

Hence change

return null

to

return of(null)