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

**Akalmie** · 15/10/2021, 14h08

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
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.

**ProgElecT** · 15/10/2021, 16h53

Salut

s'il s’agit de mettre dans la div id="results"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    //document.getElementById("subwaylist").innerHTML = html;
   document.getElementById("results").innerHTML = "<p class='text'>Résultats : </p>" + html;

**NoSmoking** · 15/10/2021, 17h01

Bonjour,

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.

il te faut écouter le changement sur le <select> que tu remplis et lancer la requête avec la valeur de celui-ci, par exemple juste pour voir

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<select id="subwaylist" onchange="console.log(this.value)"></select>

Attention de bien mettre une option vide en début pour que le onchange soit pris en compte

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

JavaScript

Discussions similaires

Partager

Partager