Bonjour à tous, 

Je souhaiterais créer un site web pour afficher les horaires de bus, métros etc... afin de, par la suite, l'afficher sur un écran supporté par un raspberry pi. Cependant je ne sais pas très bien comment m'y prendre car c'est mon premier projet web.

J'ai donc chercher une API et est trouvé celle de Pierre Grimaud (https://api-ratp.pierre-grimaud.fr/v4/).

Mais je ne sais pas comment faire pour récupérer les horaires à partir d'un URL. Faut-il que j'utilise du JavaScript ou bien du HTML ?Et comment récupérer les informations à partir d'un URL (par exemple à châtelet, les horaires de la ligne 4 vers porte de clignancourt https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/4/chatelet/R) 

Merci d'avance !

Bonjour, pour effectuer une requête réseaux il te faudra nécessairement du Javascript l'API native la plus récente pour envoyer une requête réseaux étant l'API fetch

Un exemple d'utilisation pour récupérer les données de l'url que tu as donné pourrait être:

fetch("https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/4/chatelet/R")
// récupére la réponse du serveur
.then(response => {
	// lit le contenu JSON dans le corps de la réponse:
    return response.json()
})
// récupére le contenu JSON:
.then(json => {
	console.log(json);
    // ici on pourrait mettre à jour l'interface avec les données de l'API 
})
// capture les éventuelles erreur:
.catch(error => {
	console.error(`Oops, went wrong: ${error.code} => ${error.message}`);
})

Pour en s'avoir plus sur le fonctionnement de l'API fetch tu peux lire le Guide de MDN

L'API fetch sur base sur une autre API les Promise cette API permet une gestion "simplifié" du code asynchrone (une requête réseaux par exemple).

Tu peux regarder ce tutoriel qui aborde uniquement l'API Promise avec les nouvelle syntaxe (async/await).

Merci beaucoup pour ces précisions. J'ai une dernière question : j'ai ajouté dans .then(json) une array contenant les horaires des trains comme ceci :

.then((json) => {
    horairesListe = []; //array qui stock 2 horaires
    for (let i = 0; i < 2; i++) {
      horairesListe.push(json.result.schedules[i].message);
    }
    console.log(horairesListe);
  })

La variable horairesListe devrait être globale car je n'ai pas mis 'var' avant de la définir. Cependant ça ne marche pas... Comment dois-je faire ?

Bonjour, "cela ne marche pas" est un petit peut trop vague est-ce que tu peux présenter,

Soit un code plus complet,

Soit une explication plus claire sûr ce qui ne marche pas.

Le console.log de horrairesListe étant situé juste après la boucle qui le construit j'imagine que c'est ailleurs dans le code que tu n'arrives pas a accéder à la variable ?

Un scénario qui peut exister est celui où tu essais de manipuler la variable horrairesListe avant que la requête réseaux soit terminer (donc la variable est "vide")

let horairesListe = []; //array qui stock 2 horaires

fetch("https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/4/chatelet/R")
// récupére la réponse du serveur
.then(response => {
    // lit le contenu JSON dans le corps de la réponse:
    return response.json()
})
// récupére le contenu JSON:
.then(json => {
    for (let i = 0; i < 2; i++) {
      horairesListe.push(json.result.schedules[i].message);
    }

    console.log(horairesListe); // <- tableau remplit car la requête réseaux est terminé
  })
})
// capture les éventuelles erreur:
.catch(error => {
    console.error(`Oops, went wrong: ${error.code} => ${error.message}`);
})


console.log(horairesListe); // <- tableau vide car la requête réseaux n'est pas terminé

Pour simplifier l'approche asynchrone tu peux utiliser les mots clés async/await pour pouvoir écrire le code "sous un forme synchrone"

comme l'utilisation du mot clés await nécessite d'être dans une fonction async tu peux mettre tous ton code dans une fonction async, pour pouvoir utiliser await partout dans ton code.

Un exemple d'écriture avec async/await pourrait être:

async function main() {

	const response = await fetch("https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/4/chatelet/R");
    
    const json = await response.json();
    
    for (let i = 0; i < 2; i++) {
        horairesListe.push(json.result.schedules[i].message);
    }
    
    console.log(horairesListe); // tableau remplit car la requête réseaux est terminé

}


main();

Tu peux retrouver l'explication de ces syntaxes sur le turoriel que je t'avais mentionner sur la réponse précédente.

-
Edité par SamuelGaborieau3 17 juin 2022 à 14:04:38