API REST COUNTRIES

API REST COUNTRIES

Cet exemple illustre l'utilisation de l'api REST COUNTRIES qui donne des informations sur les pays.

Pays:

Capitale:

Indicatif:

Monnaie:

Population:

Principe utilisé

En premier lieu, je crée à l'aide du javascript une boite select qui contiendra la liste des pays, ainsi qu'une table dans laquelle je stockerai les données qui m'intéressent.

J'effectue ensuite une requète HTTP sur le site de Rest Countries afin de récupérer ces données. Je les stocke dans la table (rendue invisible avec la propriété display:none.

Enfin, avec la méthode onchange de la boite select, j'appelle une fonction javascript qui remplit les différents champs en fonction du pays selectionné dans la liste.

Script annoté

Partie HTML

<div id="root" class="row container-fluid"> </div> <div class="row "> </div> <div class="row container-fluid"> <div class="col-md-1"><img id="flag" alt="" width="90px" height="60px" /></div> <div class="col-md-3"> <div class="row"><label>Pays: </label> <label id="pays"></label></div> <div class="row"><label>Capitale: </label> <label id="capitale"></label></div> </div> <div class="col-md-3"> <div class="row"><label>Indicatif: </label> <label id="indicatif"></label></div> <div class="row"><label>Monnaie: </label> <label id="monnaie"></label></div> </div> <div class="col-md-3"> <div class="row"><label>Population: </label> <label id="pop"></label></div> </div> </div>

Partie Script

<script>// <![CDATA[ setTimeout(function() { // On lance le script au bout de 1 seconde const app = document.getElementById('root'); // On accède à la Div qui a pour id: root var champselect = document.createElement("SELECT"); // On crée un champ select champselect.setAttribute("id","monselect"); // On lui donne l'id monselect champselect.setAttribute("onchange","myFunction(this.value)"); // On lui donne l'attribut onchange. La fonction myFunction sera appelée à chaque changement dans le select app.prepend(champselect); // On ajoute le champ au DOM var champtable = document.createElement("TABLE"); // Même chose, on crée une table champtable.setAttribute("id","matable"); // id=matable champtable.setAttribute("style","display:none;"); // on supprime son affichage app.prepend(champtable); // on l'ajoute au DOM var table = document.getElementById("matable"); var request = new XMLHttpRequest(); // On crée la requète request.open('GET','https://restcountries.eu/rest/v2/all', true); request.onload = function () { var data = JSON.parse(this.response); // On crée une variable data qui "parse"(rend le fichier JSON reçu if (request.status >= 200 && request.status < 400) { for (let i = 0; i <data.length; i++) { // On fait une boucle sur l'ensemble des données var row = table.insertRow(-1); // On ajoute une ligne à la table var cell1 = row.insertCell(0); // Puis des cellules var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); var cell4 = row.insertCell(3); var cell5 = row.insertCell(4); var cell6 = row.insertCell(5); var x = document.getElementById("monselect"); var option = document.createElement("option"); // On ajoute une ligne dans le select option.text = data[i].translations.fr; // On le texte option.value = i; // et la valeur associée à l'option (qui correspond à la ligne de la table) x.add(option); cell1.innerHTML = data[i].translations.fr; // On met les valeurs dans les cellules cell2.innerHTML = data[i].flag; cell3.innerHTML = data[i].currencies[0].name+" "+data[i].currencies[0].symbol; cell4.innerHTML = data[i].population; cell5.innerHTML = data[i].callingCodes[0]; cell6.innerHTML = data[i].capital; } myFunction(0); // On affiche les informations du premier enregistrement } } request.send(); },1000); function myFunction(valeur){ //A chaque appel de la fonction, on remplit les champs avec les valeurs de la ligne correspondante de la table table = document.getElementById("matable"); document.getElementById("pays").innerHTML=table.rows[valeur].cells[0].innerHTML; document.getElementById("flag").setAttribute('src',table.rows[valeur].cells[1].innerHTML); document.getElementById("pop").innerHTML=table.rows[valeur].cells[3].innerHTML; document.getElementById("capitale").innerHTML=table.rows[valeur].cells[5].innerHTML; document.getElementById("indicatif").innerHTML=table.rows[valeur].cells[4].innerHTML; document.getElementById("monnaie").innerHTML=table.rows[valeur].cells[2].innerHTML; } // ]]></script>

Edito

API REST COUNTRIES

Principe utilisé

Script annoté