BRE03

Exercices de manipulation de fetch

Exercice 1 : récupérer les données d’un utilisateur

let url = "https://maridoucet.sites.3wa.io/user-api/user/15"

Vous allez utiliser fetch pour appeler l’URL ci-dessus et récupérer les infos qu’elle vous renvoie en JSON.

Transformez-les en objet JavaScript (JSON.parse dans le cours d’hier).

Affichez ensuite l’objet avec un console.log().

Résultat attendu

/*
{
    data : 
    {
        email : "clark.kent@daily-planet.com"
        firstName : "Clark"
        id : 15
        lastName : "Kent"
        username: "Superman"
    }
}
 */

Exercice 2 : récupérer un tableau de données utilisateurs

let url = "https://maridoucet.sites.3wa.io/user-api/users";

Vous allez utiliser fetch pour appeler l’URL ci-dessus et récupérer les infos qu’elle vous renvoie en JSON.

Transformez-les en objet JavaScript (JSON.parse dans le cours d’hier).

Affichez ensuite l’objet avec un console.log().

Résultat attendu (il peut y avoir plus de données)

/*
{
  data: [
    {
      "id": 15,
      "username": "Superman",
      "firstName": "Clark",
      "lastName": "Kent",
      "email": "clark.kent@daily-planet.com"
    },
    {
      "id": 16,
      "username": "Wonder Woman",
      "firstName": "Diana",
      "lastName": "Prince",
      "email": "diana.prince@amazon.com"
    },
    {
      "id": 17,
      "username": "Black Widow",
      "firstName": "Natasha",
      "lastName": "Romanov",
      "email": "natasha.romanov@shield.us.gov"
    },
    {
      "id": 18,
      "username": "Captain America",
      "firstName": "Steve",
      "lastName": "Rogers",
      "email": "steve.rogers@avengers.com"
    }
  ]
}
 */

Exercice 3 : envoyer des informations

let url = "https://maridoucet.sites.3wa.io/user-api/create-user";

Vous allez utiliser fetch pour appeler l’URL ci-dessus et lui envoyer des informations pour créer un utilisateur avec la méthode POST.

À cause de la façon dont était codée l’API que je réutilise pour ces exercices, vous allez devoir utiliser une solution fournie par JavaScript : les FormData (l’explication du pourquoi du comment viendra au moment du module PHP 😁).

let formData = new FormData();
formData.append('username', "Votre surnom");
formData.append('firstName', "Votre prénom");
formData.append('lastName', "Votre nom");
formData.append('email', "Votre email 3WA");

let body = {
    method: 'POST',
    body: formData
};

Dans le code ci-dessus remplacez les textes d’exemples par vos vraies valeurs, et vous pourrez ensuite passer ce body à fetch pour envoyer vos informations.

Essayez de rappeler le fetch de votre exercice 2, vous devriez avoir des données supplémentaires :)

Exercice 4 : générer du HTML avec les infos récupérées avec fetch

let url = "https://maridoucet.sites.3wa.io/user-api/user/18"

Après avoir récupéré les infos avec fetch, faites en sorte de les afficher dans le DOM :

• username est un h1
• firstName et lastName dans un h2 unique
• email dans un h3

Exercice 5 : générer du contenu riche avec les infos récupérées avec fetch

let url = "https://maridoucet.sites.3wa.io/user-api/users";

Après avoir récupéré les infos avec fetch, faites en sorte de les afficher dans le DOM :

Affichez une <table> avec une ligne par utilisateur / utilisatrice (si vous voulez, vous avez le droit à Bootstrap 😂)