validation with javascript from my select using api data-CodePudding

I use an API to get access to the city's subways stations using a select.

I can display information about one station, the first one (Balard). I want to display the informations of the other stations that i choose with my select after click on the submit button. But i don't know how to make it works. Can you help me please?

Here is my code:

var link = 'https://api-ratp.pierre-grimaud.fr/v4/';
var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8";

  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("stationmetro").innerHTML = html;
    
    function Validate() {
    var e = document.getElementById("stationmetro");
    var metroselect = e.options[e.selectedIndex].text;
    var url = this.link   'schedules/metros/8/'   metroselect  '/A R';
      //alert(url);
        fetch(url, {
          method: "get"
        })
        .then(response => response.json())
        .then(data => {
          let test= data.result.schedules;
          let dest=''
          
          for (var i = 0; i < test.length; i  ) {
            dest  = "<div id='dataapi' value=> Direction: "   test[i].destination   " <br>Information :"  test[i].message  "<br></div>" 
          }
          document.getElementById("results").innerHTML = dest;
          var element = document.getElementById("dataapi");
          element.style.backgroundColor = "#00FF00";
      })
    } Validate();
  })

* {
  padding: 0 auto;
  margin: 0 auto;
  font-family: 'Arial';
}

section.container {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
}

section.container .item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 1px 1px 12px rgb(0, 0, 0, 0.2);
  border-radius: 20px;
  margin: 20px;
  padding: 10px;
  text-align: center;
}

<!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>Liste dynamique des stations de la ligne 8</p>
      <select id="stationmetro"></select>
      <input type="submit" id="btnSubmit" value="Afficher les informations" onclick="return Validate()" />
    </div>
    <div class="item" id="results">
    </div>
    <script src="main.js"></script>
  </body>
</html>

CodePudding user response：

There was some syntax issue in your code. Please update the submit button with below syntax

<input type="submit" id="btnSubmit" value="Afficher les informations" onclick="Validate()" />

And modify the script past with the script provided and try.

var link = 'https://api-ratp.pierre-grimaud.fr/v4/';
var apiStations = "https://api-ratp.pierre-grimaud.fr/v4/stations/metros/8";

  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("stationmetro").innerHTML = html;
    Validate();
    
  })
  function Validate() {
       document.getElementById("results").innerHTML =""
    var e = document.getElementById("stationmetro");
    var metroselect = e.options[e.selectedIndex].text;
    var url = this.link   'schedules/metros/8/'   metroselect  '/A R';
      //alert(url);
        fetch(url, {
          method: "get"
        })
        .then(response => response.json())
        .then(data => {
          let test= data.result.schedules;
          let dest=''
          
          for (var i = 0; i < test.length; i  ) {
            dest  = "<div id='dataapi' value=> Direction: "   test[i].destination   " <br>Information :"  test[i].message  "<br></div>" 
          }
          document.getElementById("results").innerHTML = dest;
          var element = document.getElementById("dataapi");
          element.style.backgroundColor = "#00FF00";
      })
    }