Récupérer des données du backend

**angie13003** · 23/06/2021, 16h46

Bonjour,

Je reçois ce tableau du backend

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Cannot read property 'firstNameCustomer' of undefined

Cannot read property 'licensePlateCar' of undefined

**krakatoa** · 23/06/2021, 17h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**angie13003** · 23/06/2021, 22h23

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**krakatoa** · 23/06/2021, 22h30

enleve les |i]
booking contient un objet du tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**angie13003** · 23/06/2021, 23h41

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

**krakatoa** · 24/06/2021, 06h06

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

Récupérer des données du backend

Angular

Discussions similaires

Partager

Partager