Issue with the code flow causing nested function calls to not work as expected

Question

Issue with the code flow causing nested function calls to not work as expected

I'm experiencing an issue with my code:

The problem arises when param.qtamodificata is set to true, causing the code to return "undefined" due to asynchronous calls. However, everything works fine if params.qtamodificata is false.

I am seeking a solution to ensure the code flow remains synchronous, allowing the result to be returned only after the entire process has been completed.

Any suggestions on how to address this issue?

Thank you for your assistance

getOrderRow

public getOrderRow(params): Observable<any>
  {
    //OFFLINE SWITCH OK
    var res = { headers: [], data: [] }

    return Observable.fromPromise(this._WebDBService.sysConfigurazione.toArray().then(
      data => {

        var art = JSON.parse(data[0].ordinidatajson).filter(
          function(itm,index){
            return itm.codart.v === params.codart;
          }
        );

        res.headers = JSON.parse(data[0].ordiniheaderjson);

        if(params.qtamodificata == true)
        {
          this.getQuantities(art[0].codart.v,null,params.udmmodificata, params['qtaord'+ params.udmmodificata]).subscribe(
            qtys =>{
                  art[0].qtaord1.v = qtys.dqta1;
                  art[0].qtaord2.v = qtys.dqta2;
                  art[0].qtaord3.v = qtys.dqta3;

                  res.data = art[0];

                  return res;
                }
              );          
        }
        else
        {
          res.data = art[0];
          return res;
        }                         
      }
    ));
  }

getQuantities

public getQuantities(codart: string, codvar: string, idqta: number, qta: number): Observable<any>{

    return Observable.fromPromise(this._WebDBService.tbArticoli.where({codart: codart}).toArray().then(
      data => 
      {
        console.log('getQuantities');               

        var qtys = {
          dqta1: 0,
          dqta2: 0,
          dqta3: 0
        }

        var a = data[0];

        switch (idqta) {
          case 1:
            qtys.dqta1 = +qta;
            if (a.rapudm12 > 0 && a.codudm2)
              qtys.dqta2 = qta / a.rapudm12;
            if (a.rapudm23 > 0 && a.codudm3)
              qtys.dqta3 = qta / a.rapudm23;
            break;
          case 2:
            qtys.dqta2 = +qta;
            if (a.rapudm12 > 0 && a.codudm1)
              qtys.dqta1 = qta / a.rapudm12;
            if (a.rapudm23 > 0 && a.codudm3)
              qtys.dqta3 = qta / a.rapudm23;
            break;
          case 3:
            qtys.dqta3 = +qta;
            if (a.rapudm23 > 0 && a.codudm2)
              qtys.dqta3 = qta / a.rapudm23;
            if (a.rapudm12 > 0 && a.codudm1)
              qtys.dqta1 = qta / a.rapudm12;
            break;
        }
        return qtys;

      }));    
  }

Function Call

this.orderService.getOrderRow(params, 'test')
          .subscribe(list => {
            console.log('onlineorder3');
            console.log(list);
            console.log('onlineorder3');
}

angular typescript

Answer 1

Answer №1

It appears that you are changing Promises to Observables. In this scenario, utilizing Promises along with async/await can enhance the clarity and comprehension of your code. A revised version could look like this:

public async getOrderRow(params): Promise<any> {
    //OFFLINE SWITCH OK
    var res = { headers: [], data: [] }

    var data = await this._WebDBService.sysConfigurazione.toArray();
    var art = JSON.parse(data[0].ordinidatajson).filter(
        function (itm, index) {
            return itm.codart.v === params.codart;
        }
    );

    res.headers = JSON.parse(data[0].ordiniheaderjson);

    if (params.qtamodificata == true) {
        let qtys = await this.getQuantities(art[0].codart.v, null, params.udmmodificata, params['qtaord' + params.udmmodificata]);

        art[0].qtaord1.v = qtys.dqta1;
        art[0].qtaord2.v = qtys.dqta2;
        art[0].qtaord3.v = qtys.dqta3;

        res.data = art[0];

        return res;

    }
    else {
        res.data = art[0];
        return res;
    }
}

public async getQuantities(codart: string, codvar: string, idqta: number, qta: number): Promise<any> {

    let data = await this._WebDBService.tbArticoli.where({ codart: codart }).toArray();
    console.log('getQuantities');
    var qtys = {
        dqta1: 0,
        dqta2: 0,
        dqta3: 0
    }
    // ... Omitted for brevity
    return qtys;
}

Note: I have utilized Promise<any> in the return types, however, it is recommended to specify a type that accurately describes the result. For instance, for getQuantities, the return value should ideally be

Promise<{dqta1:number, dqta2:number, dqta3:number }>

.

Answer 2

It appears that you are changing Promises to Observables. In this scenario, utilizing Promises along with async/await can enhance the clarity and comprehension of your code. A revised version could look like this:

public async getOrderRow(params): Promise<any> {
    //OFFLINE SWITCH OK
    var res = { headers: [], data: [] }

    var data = await this._WebDBService.sysConfigurazione.toArray();
    var art = JSON.parse(data[0].ordinidatajson).filter(
        function (itm, index) {
            return itm.codart.v === params.codart;
        }
    );

    res.headers = JSON.parse(data[0].ordiniheaderjson);

    if (params.qtamodificata == true) {
        let qtys = await this.getQuantities(art[0].codart.v, null, params.udmmodificata, params['qtaord' + params.udmmodificata]);

        art[0].qtaord1.v = qtys.dqta1;
        art[0].qtaord2.v = qtys.dqta2;
        art[0].qtaord3.v = qtys.dqta3;

        res.data = art[0];

        return res;

    }
    else {
        res.data = art[0];
        return res;
    }
}

public async getQuantities(codart: string, codvar: string, idqta: number, qta: number): Promise<any> {

    let data = await this._WebDBService.tbArticoli.where({ codart: codart }).toArray();
    console.log('getQuantities');
    var qtys = {
        dqta1: 0,
        dqta2: 0,
        dqta3: 0
    }
    // ... Omitted for brevity
    return qtys;
}

Note: I have utilized Promise<any> in the return types, however, it is recommended to specify a type that accurately describes the result. For instance, for getQuantities, the return value should ideally be

Promise<{dqta1:number, dqta2:number, dqta3:number }>

.

Answer 3

Answer №2

The issue I was facing got resolved after implementing forkJoin and making changes to the getOrderRow method:

 public updateOrderRow(params): Observable<any>
  {
    //OFFLINE SWITCH OK
    var response = { headers: [], data: [] }

    return Observable.forkJoin(
      Observable.fromPromise(this._WebDBService.systemConfiguration.toArray()),
      this.fetchQuantities(params.code, null, params.modifiedUdm, params['orderedQty' + params.modifiedUdm])
    ).map((
      result: any[]) => {      

        var updatedData = {headers: [], data:[]}

        var article = JSON.parse(result[0][0].orderDataJson).filter(
          function (item, index) {
            return item.code === params.code;
          }
        );

        article[0].orderedQty1 = result[1].quantity1;
        article[0].orderedQty2 = result[1].quantity2;
        article[0].orderedQty3 = result[1].quantity3;

        updatedData.headers = JSON.parse(result[0][0].orderHeadersJson);
        updatedData.data = article[0];

        return updatedData;
      }
    );

Answer 4

The issue I was facing got resolved after implementing forkJoin and making changes to the getOrderRow method:

 public updateOrderRow(params): Observable<any>
  {
    //OFFLINE SWITCH OK
    var response = { headers: [], data: [] }

    return Observable.forkJoin(
      Observable.fromPromise(this._WebDBService.systemConfiguration.toArray()),
      this.fetchQuantities(params.code, null, params.modifiedUdm, params['orderedQty' + params.modifiedUdm])
    ).map((
      result: any[]) => {      

        var updatedData = {headers: [], data:[]}

        var article = JSON.parse(result[0][0].orderDataJson).filter(
          function (item, index) {
            return item.code === params.code;
          }
        );

        article[0].orderedQty1 = result[1].quantity1;
        article[0].orderedQty2 = result[1].quantity2;
        article[0].orderedQty3 = result[1].quantity3;

        updatedData.headers = JSON.parse(result[0][0].orderHeadersJson);
        updatedData.data = article[0];

        return updatedData;
      }
    );

Issue with the code flow causing nested function calls to not work as expected

getOrderRow

getQuantities

Function Call

Answer №1

Answer №2

Similar questions

Using Vue js and Typescript to automatically scroll to the bottom of a div whenever there are changes in

What will be the output of this typescript function?

Issues arise when attempting to enforce type-safety in TypeScript while using the JSON.parse

What's the best way to display a component once a function has been executed?

What could be causing the 404 error when trying to make a get-request to fetch a list of all users?

Tips on informing the TS compiler that the value returned by a custom function is not null

How can I run a TypeScript function within a JavaScript file?

What seems to be the issue with the useState hook in my React application - is it not functioning as

Sort by label using the pipe operator in RxJS with Angular

How to apply dynamic styling to a MatHeaderCell using NgStyle?

Result of Mongodb aggregation operation

Calling the `firstValueFrom()` method in RxJS will keep the observable alive and not

Component opens MatSnackBar in various styles

You were supposed to provide 2 arguments, but you only gave 1.ts(2554)

"Upon submitting a form in React JS, the components will automatically trigger a

The field 'name' is not recognized on type 'never'

Numerous sentries summoning an asynchronous function

Changing md-sidenav mode in Angular Material 2

Displaying an Array in HTML using Angular

Incorporate an external JS file (File A) that is dependent on another JS file (File B) into a TypeScript file within the context of Angular 4