how to make a loop on a json file?-CodePudding

I have to handle a JSON file.

In JSON BLOCAGES -> BLOCAGE > I have to retrieve QTE and DTE.

Here is my file JSON here

My problem is that, I display QTE and DTE one time.

For now, I have this => enter image description here

I want to get this result => enter image description here

I'm missing the array elements [1] and [2], how could I add them from a loop?

Here is my method prepareDataForBlocage()

prepareDataForBlocage(response) {
    this.spinners.blockDetails = false;
    if (response['RETURNCODE'] == "OKK00") {


        let [variable1] = response['BLOCAGES']['BLOCAGE'];

        this.statusLine = {
            quantity: variable1['QTE'],
            update: variable1['DAT'],

        };

    }
}

My HTML

<table class="table table-striped">
   <tr style="background-color: #f8f9fa; font-weight: bold;">
      <td style="width: 13%;">Quantity</td>
      <td style="width: 13%;">Reason</td>
      <td style="width: 13%;">Date</td>
      <td style="width: 13%;">Référence</td>
   </tr>
   <tr  *ngIf="statusLine.quantity != 0" >
      <td>
         {{statusLine.quantity | number:'1.2-2' }}
      </td>
      <td></td>
      <td>
         {{statusLine.update | dateddmmyyyy }}
      </td>
      <td>
      </td>
   </tr>
</table>

CodePudding user response：

I see 2 problems in your code

the first:

let [variable1] = response['BLOCAGES']['BLOCAGE'];
/// is the same as
let variable1 = response['BLOCAGES']['BLOCAGE'][0];
/// That means you only get the first element of your list

the second is that you do not loop over an array in your template.

You could try something like:

 this.myList = response['BLOCAGES']['BLOCAGE']
  .filter(blocage => blocage['QTE'] != 0)
  .map(blocage => ({
    quantity: blocage['QTE'],
    update: blocage['DAT'],
  }));

 <tr *ngFor="let elem of myList" >
      <td>
         {{elem.quantity | number:'1.2-2'  }}
      </td>
      <td></td>
      <td>
         {{elem.update | dateddmmyyyy  }}
      </td>
      <td>
      </td>
   </tr>