Sujet Précédent Sujet Suivant

Afficher les données d'une API via les options d'un select en Javascript

Fermé
RohAias Messages postés 1 Date d'inscription vendredi 15 octobre 2021 Statut Membre Dernière intervention 15 octobre 2021 - 15 oct. 2021 à 14:14
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 - 15 oct. 2021 à 16:35
Bonjour à tous, j'espère que vous allez bien.

Dans mon html j'ai une balise select dont les options sont des données récupéré d'une API avec mon javascript. Pour l'instant pas de soucis. voici le html : 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>testapp</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  <section class="container">
    <div class="item" id="select">
      <p>list from line 8</p>
      <select id="subwaylist"></select>
      <input type="submit" value="show informations" onclick="return Validate()" />
    </div>
    <div class="item" id="results">
      <p class="text">Résultats : </p>
    </div>
    <script src="main.js"></script>
  </body>
</html>


Et voici le javascript : 
var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8";
var apiHorairesA = "https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/8/balard/A"
 
function req1(){
  fetch(apiStations, {
    method: "get"
  })
  .then(response => response.json())
  .then(data => {
    let allstations = data.result.stations;
    let html = '';
    for (var i = 0; i < allstations.length; i++) {
      html += "<option value=" + allstations[i].slug + ">" + allstations[i].name + "</option>"
    }
    document.getElementById("subwaylist").innerHTML = html;
  })
}
req1();

Ici : api-ratp.pierre-grimaud.fr/v4/schedules/metros/8/balard/A+R il affichera le temps d'arrivée du métro ainsi que sa destination (dans ce cas, nous partons de la station Balard). J'aimerais savoir comment récupérer ces informations pour chaque station que je choisis avec mon select et les mettre dans ma div de résultat.

Je vous remercie d'avance pour vos conseils.

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38241 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 septembre 2024 4 689
15 oct. 2021 à 16:35
Bonjour,
Il faut que tu mettes un listener (change) sur ton select
Et, en fonction de la valeur selectionnée, modifier l'url de la seconde api 
  
const subwaylist = document.getElementById("subwaylist");
// Fonction pour charger les horaires

un truc du genre :
function getHoraires(){
  var choix =  subwaylist.value;
  var apiHorairesA = "https://api-ratp.pierre-grimaud.fr/v4/schedules/metros/8/"+choix+"/A"
  fetch(apiHorairesA, {
    method: "get"
  })
  .then(response => response.json())
  .then(data => {
    //ici tu code l'affichage des horaires...
  })
}

// Ajouter un écouteur d'évènements à subwaylist
subwaylist.addEventListener("change", getHoraires, false);

0

Discussions similaires

Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses
Que peut faire 3fois/j un homme, mais qu'1fois/j une femme
Soter -
Raymond PENTIER -

1 réponse
SQL Lister les tables d'une base
ruth -
sara -

29 réponses
Cellules en surbrillance selon une TextBox
Wyrgle -
jordane45 -

1 réponse
"Reboot and Select proper Boot Device"
Rodoxx -
Patrick -

5 réponses