TP : utiliser le protocole HTTP pour interroger l'API JSONPlaceholder

Introduction

JSONPlaceholder est une API de démonstration qui sert généralement à tester des interfaces front-end en attendant que l'API backend d'un projet soit en place.

Elle est bien documentée ici et présente un avantage comparé à pas mal d'autres : elle est simple d'utilisation et elle propose de nombreuses méthodes (pas uniquement GET et POST) :

GET
POST
PUT
PATCH
DELETE

ce qui va vous permettre de tester les manipulations de plusieurs méthodes HTTP.

Rappel sur l'utilisation de fetch en JavaScript

Pour un GET

let url = "";

fetch(url)
  .then((response) => response.json())
  .then((json) => console.log(json));

Pour un POST, PUT ou PATCH

let url = "";
let method = "";

fetch(url, {
  method: method,
  body: JSON.stringify({
    title: 'foo',
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

Pour un DELETE

let url = "";

fetch(url, {
  method: 'DELETE',
});

Étape 0 : Mise en place

Faites en sorte de pouvoir versionner votre travail, soit dans un repo Git séparé, soit dans un dossier dans un repo Git général (selon comment vous organisez votre travail habituellement).

Le nom du dossier/repo : coda-pra-tp-http.

Vous allez passer la grande majorité du TP à regarder le résultat de vos appels dans la console JavaScript de votre navigateur, mais nous allons malgré tout mettre en place la structure minimale HTML + JS pour pouvoir appeler tranquillement l'API.

Créez donc un fichier coda-pra-tp-http/index.html avec le contenu suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>TP HTTP : JSONPlaceholder</title>
</head>
<body>
    <script type="module" src="main.js">
    
    </script>
</body>
</html>

Ensuite créez un fichier coda-pra-tp-http/main.js avec le contenu suivant :

window.addEventListener("DOMContentLoaded", () => {
    
});

Étape 1 : récupérer la liste des utilisateurs

Notre but dans cette étape est de récupérer et d'afficher dans la console JavaScript la liste des utilisateurs.

Étape 1.1 : Identifier la bonne ressource dans la doc

JSONPlaceholder propose 6 types de ressources, commencez par identifier celle qui va représenter les utilisateurs et combien d'éléments vous devriez avoir au total.

Étape 1.2 : Identifier la bonne méthode

Parmi toutes les méthodes disponibles pour votre ressource, identifiez celle qui vous permettra d'obtenir la liste complète des ressources.

Étape 1.3 : Créer le fichier JS de l'étape

Créez un fichier etape1.js et placez-y le code suivant :

export const etape1 = () => {
    
}

Étape 1.4 : remplir la fonction

Dans la fonction etape1du fichier etape1.js utilisez fetch pour récupérer la liste des utilisateurs et l'afficher dans la console JavaScript du navigateur.

Ensuite dans votre fichier main.js importez votre fonction etape1 et appelez-la.

Étape 2 : récupérer le premier utilisateur

Notre but dans cette étape est de récupérer et d'afficher dans la console JavaScript le premier utilisateur de la liste.

Étape 2.1 : Identifier la bonne ressource dans la doc

JSONPlaceholder propose 6 types de ressources, commencez par identifier celle qui va représenter les utilisateurs.

Étape 2.2 : Identifier la bonne méthode

Parmi toutes les méthodes disponibles pour votre ressource, identifiez celle qui vous permettra d'obtenir les informations d'un utilisateur.

Étape 2.3 : Créer le fichier JS de l'étape

Créez un fichier etape2.js et placez-y le code suivant :

export const etape2 = () => {
    
}

Étape 2.4 : remplir la fonction

Dans la fonction etape2du fichier etape2.js utilisez fetch pour récupérer le premier utilisateur de la liste et l'afficher dans la console JavaScript du navigateur.

Ensuite dans votre fichier main.js importez votre fonction etape2 et appelez-la.

Étape 3 : créer une todo pour le premier utilisateur

Notre but dans cette étape est de créer et d'afficher dans la console JavaScript une todo pour le premier utilisateur de la liste.

Étape 3.1 : Identifier la bonne ressource dans la doc

JSONPlaceholder propose 6 types de ressources, commencez par identifier celle qui va représenter les todos.

Étape 3.2 : Identifier la bonne méthode

Parmi toutes les méthodes disponibles pour votre ressource, identifiez celle qui vous permettra de créer une nouvelle todo.

Identifiez également les champs nécessaires pour créer une todo.

Étape 3.3 : Créer le fichier JS de l'étape

Créez un fichier etape3.js et placez-y le code suivant :

export const etape3 = () => {
    
}

Étape 3.4 : remplir la fonction

Dans la fonction etape3du fichier etape3.js utilisez fetch pour créer une todo (mettez lui les infos que vous voulez) pour le premier utilisateur de la liste.

Ensuite dans votre fichier main.js importez votre fonction etape3 et appelez-la.

Étape 4 : remplacer la première todo

Notre but dans cette étape est de remplacer et d'afficher dans la console JavaScript la première todo de la liste.

Étape 4.1 : Identifier la bonne ressource dans la doc

JSONPlaceholder propose 6 types de ressources, commencez par identifier celle qui va représenter les todos.

Étape 4.2 : Identifier la bonne méthode

Parmi toutes les méthodes disponibles pour votre ressource, identifiez celle qui vous permettra de remplacer une todo.

Identifiez également les champs nécessaires pour créer une todo.

Étape 4.3 : Créer le fichier JS de l'étape

Créez un fichier etape4.js et placez-y le code suivant :

export const etape4 = () => {
    
}

Étape 4.4 : remplir la fonction

Dans la fonction etape4du fichier etape4.js utilisez fetch pour remplacer la première todo de la liste (mettez lui les infos que vous voulez).

Ensuite dans votre fichier main.js importez votre fonction etape4 et appelez-la.

Étape 5 : modifier la première todo

Notre but dans cette étape est de modifier uniquement le champ qui indique la completion de la première todo de la liste.

Étape 5.1 : Identifier la bonne ressource dans la doc

JSONPlaceholder propose 6 types de ressources, commencez par identifier celle qui va représenter les todos.

Étape 5.2 : Identifier la bonne méthode

Parmi toutes les méthodes disponibles pour votre ressource, identifiez celle qui vous permettra de modifier une valeur d'une todo.

Étape 5.3 : Créer le fichier JS de l'étape

Créez un fichier etape5.js et placez-y le code suivant :

export const etape5 = () => {
    
}

Étape 5.4 : remplir la fonction

Dans la fonction etape5du fichier etape5.js utilisez fetch pour remplacer la première todo de la liste (mettez lui les infos que vous voulez).

Ensuite dans votre fichier main.js importez votre fonction etape5 et appelez-la.

Étape 6 : supprimer la première todo

Notre but dans cette étape est de supprimer la première todo de la liste.

Étape 6.1 : Identifier la bonne ressource dans la doc

JSONPlaceholder propose 6 types de ressources, commencez par identifier celle qui va représenter les todos.

Étape 6.2 : Identifier la bonne méthode

Parmi toutes les méthodes disponibles pour votre ressource, identifiez celle qui vous permettra de supprimer une todo.

Étape 6.3 : Créer le fichier JS de l'étape

Créez un fichier etape6.js et placez-y le code suivant :

export const etape6 = () => {
    
}

Étape 6.4 : remplir la fonction

Dans la fonction etape6du fichier etape6.js utilisez fetch pour remplacer la première todo de la liste (mettez lui les infos que vous voulez).

Ensuite dans votre fichier main.js importez votre fonction etape6 et appelez-la.

Étape Bonus :

Votre but dans cette étape est dans un premier temps remplacer la photo d'id 418 avec cette image source. Puis immédiatement après l'associer à l'album d'id 42.

21 September 2026