Vous utilisez un navigateur obsolète, veuillez le mettre à jour.
Veuillez utiliser un navigateur internet moderne avec JavaScript activé pour naviguer sur OpenClassrooms.com
Une question ? Pas de panique, on va vous aider !
Bonjour à tous et avant tout un bon férié et/ou de bonnes vacances.
Je souhaite pouvoir afficher sur ma page d’accueil le drapeau du pays du visiteur de mon site.
j'utilise l'api de : https://www.abstractapi.com/api/ip-geolocation-api. (version gratuite)
L''URL que j'utilise est la suivante : https://ipgeolocation.abstractapi.com/v1/?api_key=Ma_Clef_API
avec comme réponse :
{"ip_address":"109.0.172.228","city":"Marseille","city_geoname_id":2995469,"region":"Provence-Alpes-Côte d'Azur","region_iso_code":"PAC","region_geoname_id":2985244,"postal_code":"13001","country":"France","country_code":"FR","country_geoname_id":3017382,"country_is_eu":true,"continent":"Europe","continent_code":"EU","continent_geoname_id":6255148,"longitude":5.3861,"latitude":43.2951,"security":{"is_vpn":false},"timezone":{"name":"Europe/Paris","abbreviation":"CEST","gmt_offset":2,"current_time":"14:34:55","is_dst":true},"flag":{"emoji":"🇫🇷","unicode":"U+1F1EB U+1F1F7","png":"https://static.abstractapi.com/country-flags/FR_flag.png","svg":"https://static.abstractapi.com/country-flags/FR_flag.svg"},"currency":{"currency_name":"Euros","currency_code":"EUR"},"connection":{"autonomous_system_number":15557,"autonomous_system_organization":"Societe Francaise Du Radiotelephone - SFR SA","connection_type":"Cable/DSL","isp_name":"SFR SA","organization_name":"Ncnumericable"}}
J'arrive à récupérer la ville et l'afficher mais pas son drapeau => flag/emoji ou flag/png, comment faire ?
Par avance merci à tous . Bien à vous. Daniel
Bonjour,
pour naviguer dans un objet en JS, c'est avec soit les crochets, soit le point. Ici, par exemple c'est flag.emoji que tu devrais utiliser (ou flag['emoji'], c'est synonyme).
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Bonjour Lamecarlate et merci pour ton retour.
Non désolé mais je n'y suis pas arrivé.
Cependant j'utilise les lignes de codes suivantes, pour que cela fonctionne :
[ Utilisation de :
L'API : OpenWeather pour l'affichage de la Météo locale du visiteur
après géolocalisation avec l'API : IP Geocalisation ]
<center> <h1 class="city"></h1> <img src="" alt="" class="weather-icon"> <h1 class="temp"></h1> <p class="description"> </p> <p class="humidity"></p> <p class="wind"></p> <p class="pressure"></p> <p class="flag"></p> <img src="" alt=" : Pays"> </center> <script> (()=>{ let url = 'https://ipgeolocation.abstractapi.com/v1/?api_key=Ma_Clef_API'; fetch(url).then(resp => resp.json()).then(data_ipapi =>{ let apiKey = "e645ed0bb248b79e7c5599bbb044cba0"; let apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&lang=fr"; url = `${apiUrl}&appid=${apiKey}&q=${data_ipapi.city}`; fetch(url).then(resp => resp.json()).then(data =>{ //console.log(data); document.querySelector(".city").innerHTML = data.name; document.querySelector(".temp").innerHTML = `${Math.round (data.main.temp)} °c`; document.querySelector(".description").innerHTML = `Description : ${data.weather[0].description}`; document.querySelector(".humidity").innerHTML = `Humidité : ${Math.round (data.main.humidity)} %`; document.querySelector(".wind").innerHTML = `Vent : ${Math.round (data.wind.speed)} km/h`; document.querySelector(".pressure").innerHTML = `Préssion : ${(data.main.pressure)} hPa`; document.querySelector(".weather-icon").src = `img/weather/${data.weather[0].main.toLowerCase()}.png`; document.querySelector(".flag").innerHTML = `( ${(data_ipapi.flag.emoji)} )`; }); }); })() </script>
ce qui me donne satisfaction.
Hors je viens de me rendre compte que suivant le navigateur, j'ai un pb d'affichage de mon drapeau : "emoji":"🇫🇷".
Il s'affiche normalement avec Firefox ou Safari, mais pour Chrome et Edge il s'affiche les lettres du pays (FR).
D’où ma question :
Comment récupérer et afficher le bon drapeau à partir de l'info du fichier JSON l'URL du flag, (information communes à l'ensemble des navigateurs) :
=> "png":"https://static.abstractapi.com/country-flags/FR_flag.png", (image en png à afficher)
Ce qui devrait me permettre d'être multi-navigateur.
Par avance, merci pour ton aide.
Cordialement .
Daniel.
Vous pouvez rédiger votre message en Markdown ou en HTML uniquement.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)