Aller au contenu principal

12-2 Lire la réponse et afficher les projets

Maintenant que nous savons que le retour d'API via axios retourne un objet contenant une propriété data qui représente les données reçues, il est possible d'y accéder afin d'en lire le contenu.

Modifier la propriété projets​

Dans un premier temps, modifions la propriété projets afin de contenir les projets reçus. Nous utiliserons pour l'instant le type any afin de contenir les éléments puisque nous n'avons pas vraiment de type de données associé au retour.

src/app/features/projets/pages/projets-index.ts
export class ProjetsIndex implements OnInit {
  protected projets: any[] = [];

  async ngOnInit(): Promise<void> {
    await this.obtenirProjets();
  }

//...
info

Pour l'instant, nous utiliserons un tableau pouvant contenir des objets de n'importe quel type (any). Nous préciserons éventuellement le type.

Retourner les projets dans obtenirProjets()​

Comme on sait que la liste de projets est contenu dans reponse.data.records, on peut retourner cette liste via la fonction obtenirProjets().

src/app/features/projets/pages/projets-index.ts
protected async obtenirProjets() {
  let url = "/projets";

  let reponse = await api.get(url);
  return reponse.data;
}

Assigner le retour de obtenirProjets() à la propriété projets​

On peut assigner à projets (this.projets) le contenu de la réponse Supabase reçue via la fonction obtenirProjets().

src/app/features/projets/pages/projets-index.ts
async ngOnInit(): Promise<void> {
  this.projets = await this.obtenirProjets();
}

Cela aura pour effet d'afficher ceci comme liste de projets ☹️

img

Afficher les projets​

Le composant projets-liste affiche ce qu'on lui fournit, sans considération des propriétés que l'objet pourrait avoir. Comme on passe un tableau d'objets au composant, il affiche simplement la représentation texte de l'objet, soit [object Object]

  1. Modifiez premièrement ProjetsListe afin qu'il accepte un tableau de n'importe quel type d'objet (any).
    src/app/features/projets/components/projets-liste.ts
    export class ProjetsListe {
      @Input() projets: any[] | null = null
    }
  2. Plutôt que d'afficher directement l'objet avec les moustaches ({{ }}), utilisez plutôt la propriété projet.nom sur chaque élément de projet afin d'afficher le nom.
    src/app/features/projets/components/projets-liste.ts
    @Component({
      selector: 'app-projets-liste',
      imports: [
        RouterLink
      ],
      template: `
        <a class="btn btn-primary" routerLink="/projets/creer">Nouveau projet</a>

        @if(projets && projets.length > 0){
        <ul>
          @for(projet of projets; track $index) {
          <li>{{ projet.nom }}</li>
          }
        </ul>
        } @else {
          <p>Aucun projet</p>
        }
      `,
      styles: `
        ul {
          list-style-type: circle;

          li {
            font-weight: bold;
          }
        }
      `
    })

Vous aurez maintenant une belle liste de projets d'affichée! 🙂

img