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.

score 1 · Accepted Answer · answered Nov 24 '20 at 01:15

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)

answered Nov 24 '20 at 01:15

Pankaj Parkar

134,766
23
234
299

This solution worked great. I'm able to return the complete object and store it in this.waiverData. as soon as this.standardWaiver = standarWavierFromJSON(this.waiverData) is called It errors with TypeError: standardWaiver.waiverType is null this is from the xxxxmapper.ts file and i believe is the problem: export const standardWaiverFromJSON = (data: any) => { let standardWaiver: StandardWaiver; standardWaiver.id = isNotNullOrUndefined(data?.id) ? data.id : null; – Michael Todd Nov 25 '20 at 02:32
Seems like problem is in `standarWavierFromJSON` function. I think this solution solved the actual problem asked in question, feel free to open different question for this. – Pankaj Parkar Nov 25 '20 at 05:20
Thank you so much Pankaj, the solution got me to a place where I can move forward. I will open a second ticket for this other issue. Again, thank you. – Michael Todd Nov 30 '20 at 03:50
@MichaelTodd thanks, send link here. I probably look into it. Though you can accept the answer, if you feel it is right. Thanks :) – Pankaj Parkar Nov 30 '20 at 04:36
here is the link to the second half of the my issue. I'm highly suspicious that it's another subscription issue, but not sure. [link](https://stackoverflow.com/questions/64978335/possibly-returning-a-nested-observable-scalar-false-definetly-returning-unde) – Michael Todd Nov 30 '20 at 07:31

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

1 Answers1