IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

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


Sujet :

Angular

  1. #1
    Membre confirmé
    Femme Profil pro
    Développeur Web
    Inscrit en
    Mars 2021
    Messages
    82
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2021
    Messages : 82
    Par défaut Accès à des données d'un tableau
    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>

  2. #2
    Membre très actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Par défaut
    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>

  3. #3
    Membre confirmé
    Femme Profil pro
    Développeur Web
    Inscrit en
    Mars 2021
    Messages
    82
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2021
    Messages : 82
    Par défaut
    Merci beaucoup effectivement c'était pas compliqué j'avais essayé plein de chose sauf çà.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 25/05/2009, 09h38
  2. PHP interdire l'accès à des données
    Par Zobi-wane dans le forum Langage
    Réponses: 19
    Dernier message: 07/03/2006, 14h00
  3. [MySQL] Stocker des données dans un tableau
    Par LadyArwen dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 02/02/2006, 10h40
  4. Réponses: 3
    Dernier message: 05/12/2005, 02h30
  5. Temps d'accès à des données dans un fichier
    Par TONIAPEL dans le forum Assembleur
    Réponses: 5
    Dernier message: 28/09/2003, 15h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo