Ma 1e API

Résolu/Fermé

RomainGA Messages postés 110 Date d'inscription mardi 4 juillet 2017 Statut Membre Dernière intervention 19 mai 2024 - Modifié le 22 janv. 2022 à 22:56
RomainGA Messages postés 110 Date d'inscription mardi 4 juillet 2017 Statut Membre Dernière intervention 19 mai 2024 - 23 janv. 2022 à 12:28

Bonjour, j'ai découvert, il y a peu, le concepte des api. j'ai beau suivre des tuto, rien y fait, je bloque.
Je veux juste creer un imput dans lequel on mettrait notre code postal. On obtiendrait alors des info sur sa ville; mais rien ne s affiche.

document.querySelector('#cp').addEventListener('input', function (){
  if (this.value.length == 5) {
    let url = `[https://geo.api.gouv.fr/communes?codePostal=%24%7Bthis.value%7D&fields=nom%2CcodesPostaux%2Cpopulation&format=json&geometry=centre%60];
    fetch(url).then((response) => response.json().then((data) => console.log(data))
      
    );
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<h1>api - td</h1>
<form>
   
<label for='cp'>Code postal : </label>
<input type="text" maxlength="5" value="Code Postal" name='cp' id="cp">

</form>

   <script src="main.js"></script>
</body>
</html>

Merci

EDIT : Correction des balises de code ( ajout du LANGAGE )

A voir également:

Erreur inconnue de l'api « open collaboration service ». (0)
Erreur 0x80070643 - Accueil - Windows
Erreur 0 free - Forum Samsung
Customer service epoch ✓ - Forum Vos droits sur internet
Service spouleur - Guide
Excel différent de 0 ✓ - Forum Excel

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38446 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 février 2025 4 739
22 janv. 2022 à 23:02

Bonjour,

Ta variable url est foireuse.
Tu as mal fermé la string .. et pas fait de concaténation pour y intégrer la "value" de ton input..

Essaye comme ça

 document.querySelector('#cp').addEventListener('input', function (){
  if (this.value.length == 5) {
    let url = "https://geo.api.gouv.fr/communes?codePostal=" + this.value + "&fields=nom%2CcodesPostaux%2Cpopulation&format=json&geometry=centre%60";
    console.log('URL',url);
    fetch(url).then((response) => response.json().then((data) => console.log(data))
      
    );
  }
});

NB: Pense bien à vider le cache de ton navigateur pour être sûr qu'il prenne en compte les modifications.

RomainGA Messages postés 110 Date d'inscription mardi 4 juillet 2017 Statut Membre Dernière intervention 19 mai 2024 6
23 janv. 2022 à 12:28

Exact, merci beaucoup :)

Discussions similaires

erreur api sur kde neon

Impossible de valider captcha L'api ne fonctionne pas

Impossible de remplir les captcha

Erreur 1500 (une autre installation est en cour) LibreOffice

Périphérique ne peut pas démarrer. (Code 10)

erreur 1500