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
Le fichier à télécharger est la nouvelle note de service de votre entreprise. importez ce fichier dans le bon dossier sur l'espace pix cloud. donnez à ce fichier les mêmes droits d'accès que les autres notes de service. ✓ - Forum Windows
Une erreur s'est produite instagram ✓ - Forum Instagram
Customer service epoch ✓ - Forum Vos droits sur internet
Freebox erreur video inconnue ✓ - Forum TV & Vidéo

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38264 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 octobre 2024 4 694
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