How to display data from array "Products": [{}]

Question

How to populate this JSON in my EditForm. I have EditForm, that I want to display my data, my ws get me this JSON. My data outside Products I can display in html, but data inside Products I don't know why not display. What is the problem?

This is my Json

{
    "StatusCode": 0,
    "StatusMessage": "OK",
    "StatusDescription": [
        {
            "Products": [
                {
                    "p_id": "11E8218A54B30C89AE8800FF76874A59",
                    "p_pt_id": "11E7FC041F467AD4B09D00FF76874A59",
                    "p_l": 233,
                    "p_d": "test",
                    "p_q": 4,
                    "p_u_p": 50,
                    "p_s": 120                  
                }
            ],
            "sale_item_id": "11E8219D916A69F6AE8800FF76874A59",
            "sale_id": "11E8218B9BA4F278AE8800FF76874A59",
            "client_id": "11E8218A57B28B0AAE8800FF76874A59",
            "sale_date": "2018-03-06T22:09:43.000Z",
            "notes": "testing",
            "subtotal": 80,
            "total": 50,
            "invoice_number": "28282",
            "invoice_date": "2018-03-06T21:57:41.000Z",
            "amount_paid": 32       
        }
    ]
}

My ts code.

editForm: FormGroup;    

    this.editForm = this.fb.group({

      'sale_id': new FormControl('', Validators.required),
      'client_id': new FormControl('', Validators.required),
      'sale_date': new FormControl('', Validators.required),
      'notes': new FormControl('', Validators.required),
      'total': new FormControl('', Validators.required),
       'p_d': new FormControl('', Validators.required),
        'p_pt_id': new FormControl('', Validators.required),
         'p_l': new FormControl('', Validators.required),
      'products': new FormControl([])
    });

  populateForm() {
    this.activatedRoute.params.subscribe(
      params => {
        this.ws.salegetbyid(params['id']).subscribe(
          sale => {
            this.sale = sale;
            this.editForm.controls['sale_id'].setValue(sale.sale_id);
            this.editForm.controls['client_id'].setValue(sale.client_id);
            this.editForm.controls['sale_date'].setValue(sale.sale_date);
            this.editForm.controls['notes'].setValue(sale.notes);
            this.editForm.controls['total'].setValue(sale.total);
              this.editForm.patchValue({
              p_pt_id: this.sale.products.map(x => x.p_pt_id),
              p_l: this.sale.products.map(x => x.p_l),
                 p_d: this.sale.products.map(x => x.p_d)
            })
           }
        );

      }
    );
  }

And my html code

<form [formGroup]="editForm" (ngSubmit)="oneddit()" class="col s12" materialize>

  <div class="contant">
    <div class="row">
      <div class="input-field col s4">
        sale_id:
        <input formControlName="sale_id" id="sale_id" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        client_id:
        <input formControlName="client_id" id="client_id" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        sale_date:
        <input formControlName="sale_date" id="sale_date" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        notes:
        <input formControlName="notes" id="notes" type="text" class="validate">
      </div>
      <div class="input-field col s4">
        total:
        <input formControlName="total" id="total" type="number" class="validate">
      </div>
    </div>
  </div>
  <br>

  <table align="center" class="table table-bordered table-hover">

    <thead>
      <tr style="color:black;">
        <th>p_d</th>
        <th>p_pt_id</th>
        <th>p_l</th>
      </tr>
    </thead>
    <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of products;">
        <td>{{item.p_d}}</td>
        <td>{{item.p_pt_id}}</td>
        <td>{{item.p_l}} </td>
      </tr>
    </tbody>
  </table>
  <br>

  <div class="row" style="float: right;">
    <button id="add_client_button" type="submit" class="btn waves-effect waves-light">
      Register
    </button>
  </div>
</form>

I change this code, like

ts code:

'products': this.fb.array([])

 this.sale.products.forEach(x => {
          (this.editForm.get('products') as FormArray).push(new FormControl(x.products))
        }) 

and in html:

   <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of editForm.get('products').value; let i = index">
        <td>{{item.p_d}}</td>
        <td>{{item.p_pt_id}}</td>
        <td>{{item.p_l}} </td>
      </tr>
    </tbody>

but this change show me this error: ERROR TypeError: Cannot read property 'item.p_d' of null at Object.eval [as updateRenderer]

Can you help me, what is the problem?

Answer 1

First put in your html {{editForm.value | json}} to see what you have in there.

Second I suppose that this.sale.products refers to StatusDescription. Now products is an array of let us say product objects. You ask products for product attributes. So supposing that you map your object correctly, you would need editForm.get('products').value in html. Form arrays are arrays of FormGroup that they in turn have FormControl

Try this:

     this.sale.products.forEach(x => {
              (this.editForm.get('products') as FormArray).push(new FormGroup({
           p_id: x.p_id,
           p_l: x.p_l // and so on
         }))
     })

Answer 2

I solved this problem, like this

this.sale.products.forEach(product => {
    (this.editForm.get('products') as FormArray).push(this.createFGPoduct(product))
})

    createFGPoduct(product: Product): FormGroup {
        return new FormGroup({
           p_id: new FormControl(product.p_id),
           p_pt_id: new FormControl(product.p_pt_id, [Validators.required]),
           p_l: new FormControl(product.p_l, [Validators.required]),
           p_d: new FormControl(product.p_d, [Validators.required])

        })
    }

HTML code.

 <tbody>
      <tr class="group" style="cursor: pointer" *ngFor="let item of editForm.get('products').value; let i = index">
        <td>{{item.p_d}}</td>
        <td>{{item.p_pt_id}}</td>
        <td>{{item.p_l}} </td>
      </tr>
    </tbody>