Accès à des données d'un tableau

**angie13003** · 20/05/2021, 14h25

Bonjour,

J'ai un problème d'accès à un tableau reçut via mon api.

Voici le tableau

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
[
    {
        "0": {
            "idCustomer": "1",
            "idBillingAddress": "1",
            "firstNameCustomer": "Nom1",
            "lastNameCustomer": "Prénom1",
            "dateOfBirthdayCustomer": "1991-09-04",
            "phoneCustomer": "1234567890",
            "mailCustomer": "nom1@test1.com",
            "mixedPassworrd": "AT1202cm.3",
            "idPartner": "1",
            "dateCustomer": "2021-05-08 22:14:22",
            "statusCustomer": null
        },
        "1": {
            "idCar": "2",
            "idCustomer": "1",
            "licensePlateCar": "AA-123-AA",
            "brandCar": "Marque1",
            "modelCar": "Model1",
            "dateOfCirculationCar": "2020-12-31",
            "motorizationCar": "Motor1",
            "urlGrayCard": "adresseServeur/grayCard/1/test1.pdf"
        },
        "idBooking": "1",
        "idCustomer": "1",
        "idPartner": "2",
        "hoursForth": "08:30:00",
        "dateForth": "2021-05-10",
        "statusBooking": "Validée",
        "formulaBooking": "technicalControl",
        "dateBack": "2021-05-10",
        "hoursBack": "14:30:00",
        "idCar": "2",
        "idForthAddress": "2",
        "idBackAddress": "3",
        "idAgency": "1",
        "distanceForth": "20",
        "durationForth": "45",
        "distanceBack": "15",
        "durationBack": "30",
        "originBooking": "customer",
        "dateBooking": "2021-05-08 22:45:57"
    },
    {
        "0": {
            "idCustomer": "2",
            "idBillingAddress": "4",
            "firstNameCustomer": "Nom2",
            "lastNameCustomer": "Prénom2",
            "dateOfBirthdayCustomer": "1990-03-26",
            "phoneCustomer": "0987654321",
            "mailCustomer": "nom2@test2.com",
            "mixedPassworrd": "C260390m",
            "idPartner": "2",
            "dateCustomer": "2021-05-08 22:14:22",
            "statusCustomer": null
        },
        "1": {
            "idCar": "3",
            "idCustomer": "2",
            "licensePlateCar": "BB-123-BB",
            "brandCar": "Marque2",
            "modelCar": "Model2",
            "dateOfCirculationCar": "2012-08-23",
            "motorizationCar": "Motor2",
            "urlGrayCard": "adresseServeur/grayCard/2/test2.pdf"
        },
        "idBooking": "2",
        "idCustomer": "2",
        "idPartner": "2",
        "hoursForth": "09:45:00",
        "dateForth": "2021-05-12",
        "statusBooking": "Validée",
        "formulaBooking": "technicalControl",
        "dateBack": "2021-05-12",
        "hoursBack": "16:00:00",
        "idCar": "3",
        "idForthAddress": "8",
        "idBackAddress": "7",
        "idAgency": "2",
        "distanceForth": "5",
        "durationForth": "30",
        "distanceBack": "5",
        "durationBack": "30",
        "originBooking": "customer\r\n",
        "dateBooking": "2021-05-08 22:45:57"
    }
]

Dans mon code angular j'ai effectué plusieurs test mais impossible d'accéder aux données des données de 2ème niveaux. Voici mon code de mes différents fichiers angular

booking.service.ts

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
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { Booking } from '../models/bookings.model';
 
@Injectable({
  providedIn: 'root'
})
export class BookingService {
 
  bookingSubject = new Subject<Booking[]>();
  api = 'http://localhost:8888/MoutteCAPI/backend/api/booking/listBooking.php';
  private bookings: Booking[];
 
  constructor(private httpClient: HttpClient) { }
 
  emitBookingSubject() {
    this.bookingSubject.next(this.bookings);
  }
 
  readListBooking(idPartner) {
    this.httpClient.get<Booking[]>(`${this.api}?idPartner=${idPartner}`).subscribe(
      (bookings) => {
        this.bookings = bookings;
        this.emitBookingSubject();
      },
      (error) => {
        console.log(error);
      }
    );
  }
 
  getBookingById(idBooking) {
    return this.httpClient.get(`http://localhost:8888/MoutteCAPI/backend/api/booking/listBooking.php?idBooking=${idBooking}`);
  }
}

list-booking-view.component.ts

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
import { map, first } from 'rxjs/operators';
import { BookingService } from 'src/app/services/booking.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { Booking } from '../models/bookings.model';
 
 
@Component({
  selector: 'app-list-booking-view',
  templateUrl: './list-booking-view.component.html',
  styleUrls: ['./list-booking-view.component.css']
})
export class ListBookingViewComponent implements OnInit, OnDestroy {
 
  bookingSusbcription: Subscription;
  bookings: Booking[];
  dateForth: string;
  dateBack: string;
  idPartner = localStorage.getItem('idPartner');
 
  constructor(private bookingService: BookingService) {}
 
  ngOnInit(): void {
    this.bookingSusbcription = this.bookingService.bookingSubject.subscribe(
      (bookings: Booking[]) => {
        this.bookings = bookings;
        console.log(bookings);
      }
    );
    this.bookingService.readListBooking(this.idPartner);
  }
 
 
  ngOnDestroy():  void {
    this.bookingSusbcription.unsubscribe();
  }
 
}

list-booking-view.component.html

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="row mt-5 mb-3 pt">
  <div class="text-center col-12">
      <h2>Rendez-vous à venir</h2>
  </div>
</div>
 
<div class="container pb-5">
  <app-list-booking *ngFor="let booking of bookings; let i = index" [indexOfBooking]="i" [idBooking]="booking.idBooking" [firstNameCustomer]="booking.0.firstNameCustomer" [lastNameCustomer]="booking.0.lastNameCustomer" [phoneCustomer]="booking.0.phoneCustomer" [licensePlateCar]="booking.1.licensePlateCar" [brandCar]="booking.1.brandCar" [modelCar]="booking.1.modelCar" [dateOfCirculationCar]="booking.1.dateOfCirculationCar" [motorizationCar]="booking.1.motorizationCar" [dateForth]="booking.dateForth" [hoursForth]="booking.hoursForth" [dateOfBirthdayCustomer]="booking.0.dateOfBirthdayCustomer" [mailCustomer]="booking.0.mailCustomer" [urlGrayCard]="booking.1.urlGrayCard" [dateBack]="booking.dateBack"></app-list-booking>
</div>

list-booking.component.ts

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
import { Component, OnInit, Input } from '@angular/core';
 
 
@Component({
  selector: 'app-list-booking',
  templateUrl: './list-booking.component.html',
  styleUrls: ['./list-booking.component.css']
})
export class ListBookingComponent implements OnInit {
 
  @Input() indexOfBooking: number;
  @Input() idBooking: number;
  @Input() firstNameCustomer: string;
  @Input() lastNameCustomer: string;
  @Input() phoneCustomer: string;
  @Input() licensePlateCar: string;
  @Input() brandCar: string;
  @Input() modelCar: string;
  @Input() dateOfCirculationCar: string;
  @Input() motorizationCar: string;
  @Input() dateForth: string;
  @Input() hoursForth: string;
  @Input() dateOfBirthdayCustomer: string;
  @Input() mailCustomer: string;
  @Input() urlGrayCard: string;
 
 
  constructor() { }
 
  ngOnInit(): void {
 
  }
 
}

list-component.html

Code html :

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
<div class="row list-group list-group-flush list-group-item d-flex flex-row">
  <div class="col-1 m-auto">
      <img src="./assets/images/profile.png">
  </div>
  <div class="col-7 d-flex flex-column">
    <div class="row">
      <div class="col-6">
        <p class="m-auto p-2 info"><span>Nom : </span><br>{{ firstNameCustomer }}</p>
      </div>
      <div class="col-6">
        <p class="m-auto p-2 info"><span>Prénom : </span><br>{{ lastNameCustomer }}</p>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <p class="m-auto p-2 info"><span>Plaque d'immatriculation : </span><br>{{ licensePlateCar }}</p>
      </div>
      <div class="col-6">
        <p class="m-auto p-2 info"><span>Date de rendez-vous : </span><br>{{ dateForth }}</p>
      </div>
    </div>
 
  </div>
  <div class="col-4 d-flex flex-row">
      <div class="m-auto">
        <a [routerLink]="[idBooking]" class="mr-3 plus">Détails</a>
      </div>
      <div class="m-auto">
        <a [href]="[urlGrayCard]" target="_blank" style="font-size: 12px;" class="mr-3 plus btn">Carte Grise</a>
      </div>
  </div>
</div>

**krakatoa** · 20/05/2021, 16h09

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div *ngFor="let item of bookings">
  customer = {{ item[0] | json }}
    firstNameCustomer =  {{ item[0].firstNameCustomer }}
    ...
    ...
  car = {{ item[1] | json }} 
    ...
  ...
  idPartner = {{ item.idPartner }} 
  hoursForth = {{ item.hoursForth }}
  ...
</div>

**angie13003** · 20/05/2021, 16h40

Merci beaucoup effectivement c'était pas compliqué j'avais essayé plein de chose sauf çà.

Accès à des données d'un tableau

Angular

Vue hybride

Discussions similaires

Partager

Partager