error TS2339: Property 'num' does not exist on type 'CustomerTransfert[]'

Question

From a webService, I would like to display the data.

The error message is:

error TS2339: Property 'num' does not exist on type 'CustomerTransfert[]'.

enter image description here

I share the JSON file with you, I would just like to display the value of the NUM variable.

I made a console.log I recover the data

enter image description here

private getCustomerTransfert(): void {
    this.service.getCustomerTransfert().pipe(
        takeUntil(this.unsubscribe$)
    ).subscribe(res => {
        console.log("Step 1");

        this.customerTransferts = res.PREA.map(val => {
            console.log("Result => " + JSON.stringify(res.PREA));
            return {
                cler: val.CLER,
                num: val.NUM,
                ref_rbc: val.REF_RBC,
                type: val.TYPE,
                quantite: val.QUANTITE,
                isin: val.ISIN,
                trade_date: val.TRADE_DATE,
                reception_date: val.RECEPTION_DATE,
                statut: val.STATUT,
                label: val.LABEL,
            }
        });
    });
}

The complete code

export class CustomerTransfertDetailsComponent implements OnInit, OnDestroy {
    private unsubscribe$ = new Subject < void > ();
    customerTransferts: CustomerTransfert[] = [];

    constructor(private service: CustomerTransfertDetailsService, private http: HttpClient) { }

    ngOnInit(): void {
        this.getCustomerTransfert();
    }

    ngOnDestroy(): void {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
    }


    private getCustomerTransfert(): void {
        this.service.getCustomerTransfert().pipe(
            takeUntil(this.unsubscribe$)
        ).subscribe(res => {
            console.log("Step 1");

            this.customerTransferts = res.PREA.map(val => {
                console.log("Result => " + JSON.stringify(res.PREA));
                return {
                    cler: val.CLER,
                    num: val.NUM,
                    ref_rbc: val.REF_RBC,
                    type: val.TYPE,
                    quantite: val.QUANTITE,
                    isin: val.ISIN,
                    trade_date: val.TRADE_DATE,
                    reception_date: val.RECEPTION_DATE,
                    statut: val.STATUT,
                    label: val.LABEL,
                }
            });
        });
    }


    goBack(): void {

    }

}

My problem in HTML

<div class="home-content">
   <div class="container" *ngIf="customerTransferts">
      <div class="pt-50">
         <div class="breadcrumb d-flex justify-content-between border-bottom pb-3">
            <h2>Détails d'un transfert </h2>
            <button type="button" (click)="goBack()" class="btn btn-primary m-1 btnColor">Retour </button>
         </div>
         <div class="pt-3 container">
            <div class="card">
               <div class="card-body">
                  <div class="row">
                     <div class="col">
                        <table class="table table-hover table-striped spaceLeft">
                           <tbody>
                              <tr>
                                 <th>N° de préavis</th>
                                 <td> {{ customerTransferts.num}} </td>
                              </tr>
                           </tbody>
                        </table>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

customer-transfert.response.ts

import {
    ApiResponse
} from "src/shared/types/api.response";

export interface CustomerTransfertResponse extends ApiResponse {
    PREA: {
        CLER: string;
        NUM: number;
        REF_RBC: string;
        TYPE: string;
        QUANTITE: number;
        ISIN: string;
        TRADE_DATE: Date;
        RECEPTION_DATE: Date;
        STATUT: number;
        LABEL: string;
    } [];
}

customer-transfert.ts

export interface CustomerTransfert {
    cler: string;
    num: number;
    ref_rbc: string;
    type: string;
    quantite: number;
    isin: string;
    trade_date: Date;
    reception_date: Date;
    statut: number;
    label: string;
}

Answer 1

This is actually correct behavior. As per your codebase, the

this.customerTransferts = res.PREA.map(val => {
                console.log("Result => " + JSON.stringify(res.PREA));
                return {
                    cler: val.CLER,
                    num: val.NUM,
                    ref_rbc: val.REF_RBC,
                    type: val.TYPE,
                    quantite: val.QUANTITE,
                    isin: val.ISIN,
                    trade_date: val.TRADE_DATE,
                    reception_date: val.RECEPTION_DATE,
                    statut: val.STATUT,
                    label: val.LABEL,
                }
            });

the customerTransferts is an Array and not an individual object.

Also, you can see in the error as well, that the num does not exists on type CustomerTransfert[] (This is an array type).

You have to use ngFor too iterate over customerTransferts array and then you can access the num field.