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).

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.