Iterate values of two requests in * ngFor

Question

Iterate values of two requests in * ngFor

Navigation

#1 by (0 votes)

1

I'm making two requests in the database, one brings the grouped requests just for preview on the front, the other brings all the values, the latter needs to show the total of each request along with the first request view.

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 was able to get the total of each request saved in the bank already with the variable totalOrder:

ButonthefrontonlycomeslastandI'mnotgettingputineveryloop.

loop for typescript angular

asked by anonymous 03.12.2018 / 15:38

1 answer

I am trying to make a multidimensional vertical menu with vue.js but the subitems are not appearing I can not identify the error in my script

score 0 · Answer 1

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

Change 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);
            });
        }
});

}

Then you access the value using the data ['totalOrder']