Récupérer des données du backend

Bonjour,

Je reçois ce tableau du backend

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101

[ { "idBooking": "10", "idCustomer": "7", "idPartner": "2", "hoursForth": "07:30:00", "dateForth": "2021-06-16", "statusBooking": "confirme", "formulaBooking": "forth", "dateBack": null, "hoursBack": null, "idCar": "39", "idAddressForth": "11", "idAddressBack": null, "idAgency": "2", "distanceForth": "4", "durationForth": "12", "distanceBack": null, "durationBack": null, "originBooking": "partner", "carProcess": null, "dateBooking": "2021-06-13 15:50:17", "datecode": "2021-06-16", "timecode": "073000", "customerData": { "idCustomer": "7", "idBillingAddress": "11", "firstNameCustomer": "test", "lastNameCustomer": "test", "dateOfBirthdayCustomer": "Non renseigné", "phoneCustomer": "000000000", "mailCustomer": "test@gmail.com", "mixedPassword": "$2y$10$5GdLi6QxXWw95LTMJmsHDOb6QjO1g8ZIywCyeQRqREyO51YIkR0hi", "idPartner": null, "dateCustomer": "2021-06-12 16:56:37", "statusCustomer": "Actif" }, "carData": { "idCar": "39", "idCustomer": "7", "licensePlateCar": "EG-512-BF", "brandCar": "renault", "modelCar": "", "dateOfCirculationCar": "test", "motorizationCar": "jjjj", "colorCar": "zezerze", "versionCar": "fezfe", "urlGrayCard": null } }, { "idBooking": "5", "idCustomer": "3", "idPartner": "1", "hoursForth": "08:30:00", "dateForth": "2021-06-22", "statusBooking": "confirme", "formulaBooking": "technicalControl", "dateBack": "2021-06-22", "hoursBack": "14:30:00", "idCar": "7", "idAddressForth": "3", "idAddressBack": "4", "idAgency": "1", "distanceForth": "41", "durationForth": "26", "distanceBack": "41", "durationBack": "26", "originBooking": "partner", "carProcess": null, "dateBooking": "2021-05-22 16:19:45", "datecode": "2021-06-22", "timecode": "083000", "customerData": { "idCustomer": "3", "idBillingAddress": "5", "firstNameCustomer": "Nom3", "lastNameCustomer": "Prénom3", "dateOfBirthdayCustomer": "1993-12-21", "phoneCustomer": "5432167890", "mailCustomer": "nom3@test3.com", "mixedPassword": "N121212.m", "idPartner": "3", "dateCustomer": "2021-05-08 22:16:16", "statusCustomer": null }, "carData": { "idCar": "7", "idCustomer": "1", "licensePlateCar": "13AJE0755", "brandCar": "NISSAN", "modelCar": "MICRA", "dateOfCirculationCar": "01/03/2005", "motorizationCar": "82", "colorCar": "", "versionCar": "0", "urlGrayCard": null } } ]

---

je récupére donc ce tableau et je le stock dans la variable booking.
Je souhaite accèder aux valeurs fisrtNameCustomer et licensePlateCar.
Pour ce faire je fais un appel respectif de cette manière
booking[customerData].fisrtNameCustomer et booking[carData].licensePlateCar

et il me sort cette erreur

Citation:

---

Cannot read property 'firstNameCustomer' of undefined

---

Citation:

---

Cannot read property 'licensePlateCar' of undefined

---

un tableau d'objets

[ {}, {}, {}] // un tableau de 3 objets

on accède à un element du tableu avec son indice
[0] // 1er objet
[1] // le 2eme objet
[2] ...


en objet, on accede à une propriété de l'objet de 2 manières
booking[0].customerData
ou
booking[0]['customerData']

Code:

---

1 2 3

const a = booking[0].customerData.firstNameCustomer; const b = booking[0]['carData']['licensePlateCar'];

---

tu veux récupérer l'objet dont idBooking = 5

Code:

---

1 2 3

const booking1: any = booking.filter((item: any) => item.idBooking === 5); const name1 = booking1.customerData.firstNameCustomer;

---

je commence à mieux comprendre le fonctionnement de récupération

mais si je suis dans une boucle *ngFor cela ne fonction pas ?

Code:

---

1 2 3 4 5 6 7 8 9

<div class="container pb-5"> <app-list-booking *ngFor="let booking of bookings  | paginate: { itemsPerPage: 10, currentPage: p }; let i = index" [indexOfBooking]="i" [idBooking]="booking[i].idBooking" [firstNameCustomer]="booking[i].customerData.firstNameCustomer" [lastNameCustomer]="booking[i].customerData.lastNameCustomer" [phoneCustomer]="booking[i].customerData.phoneCustomer" [licensePlateCar]="booking[i].carData.licensePlateCar" [brandCar]="booking[i].carData.brandCar" [modelCar]="booking[i].carData.modelCar" [dateOfCirculationCar]="booking[i].carData.dateOfCirculationCar" [motorizationCar]="booking[i].carData.motorizationCar" [dateForth]="booking[i].dateForth" [hoursForth]="booking[i].hoursForth" [dateOfBirthdayCustomer]="booking[i].customerData.dateOfBirthdayCustomer" [mailCustomer]="booking[i].customerData.mailCustomer" [dateBack]="booking[i].dateBack"></app-list-booking> <div class="row mt-5"> <pagination-controls class="hide-page-numbers m-auto text-center" (pageChange)="p = $event" previousLabel="précédent" nextLabel="suivant"></pagination-controls> </div> </div>

---

enleve les |i]
booking contient un objet du tableau

Code:

---

1 2	[phoneCustomer]="booking.customerData.phoneCustomer"

---

ok alors l j'ai pas tout compris mais avec votre solution cela fonctionne

la boucle for va te chercher un à un les éléments du tableau et te les fournir
il te fournis directement l'élément (sans l'indice)

arr = ['a', 'b', 'c']
pour accéder
arr[0]
arr[2]

ngfor="let value of arr"

value va valoir 'a' puis 'b' puis 'c' (sans les indices, dans 95% des cas on en a pas besoin)

si on veut l'indice pour une raison quelconque on fait comme ça :
ngfor="let value of arr; let i = index"
value vaudra 'a' puis 'b' puis 'c' et i 0, 1, 2