Iterate values of two requests in *ngFor

Question

I am making two requests in the bank, one brings the orders grouped only for view on the front, the other brings all values, the last need to show the total of each request along with the view of the first request.

listOrders() {
    this.service.getListOrders().subscribe(data => { // 1º requisição
      console.log(this.list = data['message']);
      for (this.getNumberOrders of this.list) {
        this.getNumberOrder = this.getNumberOrders['order_number'];
        console.log(this.getNumberOrder);
        this.service.getListOrdersNumber(this.getNumberOrder).subscribe(data => { // 2º requisição
          console.log(this.listAll = data['message']);
          this.totalOrder = this.listAll.reduce(function (a, b) {
            return a + b['vlr_total'];
          }, 0).toFixed(2);
          console.log(this.totalOrder);
        });
      }//for
    });
  }

<div class="row-table-orders" *ngFor="let data of list | search: pp">
      <span>{{data.order_number | slice:0:6}}</span>
      <!-- it is shown just one line -->
      <span class="brown" *ngIf="data.status_order === 0">Pendente</span>
      <span class="green" *ngIf="data.status_order === 1">Aceito</span>
      <span class="red" *ngIf="data.status_order === 2">Cancelado</span>

      <span>{{data.name}}</span>

      <span>{{data.order_date | date: 'dd/MM/yyyy'}}</span>
      <span>{{data.date_delivery | date: 'dd/MM/yyyy'}}</span>
      <!-- it is shown just one line -->
      <span *ngIf="data.term_pay === 1">7 dias</span>
      <span *ngIf="data.term_pay === 2">15 dias</span>
      <span *ngIf="data.term_pay === 3">à vista</span>
      <span>{{totalOrder}}</span>

      <span>
        <button class="bt-edit" (click)="showingEdit(data)">
          <span>
            <svg style="width:18px;height:18px" viewBox="0 0 24 24">
              <path fill="#fff" d="M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z" />
            </svg>
          </span>
          <span>editar</span>
        </button>
      </span>
    </div>

i managed to get the total of each order saved in the bank already with the variable totalOrder:

But on the front only comes last and I’m not able to put in each loop.

Answer 1

totalOrder is unique and you are recording three results in the same variable, which only makes you see the last result because you write over the other results.

Trade your code for this:

listOrders() {
this.service
    .getListOrders()
    .subscribe(data => { // 1º requisição

        this.list = data['message'];
        for (const numberOrders of this.list) {
            const numberOrder = numberOrders['order_number'];

            this.service
                .getListOrdersNumber(numberOrder)
                .subscribe(data => { // 2º requisição
                    const listAll = data['message'];
                    numberOrders['totalOrder'] = listAll.reduce(function (a, b) {
                        return a + b['vlr_total'];
                    }, 0).toFixed(2);
            });
        }
});

}

And then you access the value using the date['totalOrder']