JavaScript - How to access a variable from another function?

Question

I need to get the result from the variable latlng from CountryAPI() an pass it to myMap() as the code below, but I keep getting Uncaught ReferenceError: latlng is not defined:

const selectCountry = document.getElementById('country');
var latlng;
function countryAPI() {
    const countrySelected = selectCountry.options[selectCountry.selectedIndex].text;
    fetch(`https://restcountries.eu/rest/v2/name/${countrySelected}`)
    .then(res => res.json()) //convert to JSON
    .then(data => { //access the data from the JSON
      latlng = data[0].latlng;  
      document.querySelector('.results').innerHTML = `<ul>
      <li><img src=${data[0].flag} width="150px" align="center" alt="${data[0].name}"</li>
      <li><b>Capital:</b> ${data[0].capital}</li>
      <li><b>Population:</b> ${data[0].population}</li>
      </ul>`
     });
}
countryAPI();
selectCountry.addEventListener('change', countryAPI);

function myMap() {
      var mapProp= {
        center:new google.maps.LatLng(latlng),
        zoom:5,
      };
    var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

Where, how, and most importantly when, are you calling myMap()? — Bergi
– Bergi, Commented Aug 8, 2020 at 21:01
I'm calling it in the beginning of the body tag: <div id="googleMap"></div> — Eitan Peles
– Eitan Peles, Commented Aug 9, 2020 at 14:53
Well, don't. Call it from the .then() callback instead, after the json is fetched and the variable is initialised. — Bergi
– Bergi, Commented Aug 9, 2020 at 14:55

Eitan Peles · Accepted Answer · 2020-08-16 16:46:36Z

I've found the solution!

const selectCountry = document.getElementById("country");

async function countryAPI() {
   const countrySelected = selectCountry.options[selectCountry.selectedIndex].text;
   const res = await fetch(`https://restcountries.eu/rest/v2/name/${countrySelected}`);
   const data = await res.json();
   let latlng = data[0].latlng;
   myMap(latlng);
   document.querySelector(".results").innerHTML = `<ul>
     <li><b>Capital:</b> ${data[0].capital}</li>
     <li><b>Population:</b> ${formatNum(data[0].population)}</li>
   </ul>`;
}

selectCountry.addEventListener("change", countryAPI);

countryAPI();

function myMap(latlng) {
   if(latlng){
    var mapProp = {
      center: new google.maps.LatLng(latlng[0],latlng[1]),
      zoom: 6,
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  }
}

DavidGD · Accepted Answer · 2020-10-07 19:04:41Z

0

You need to call the MyMap() function and include the parameter MyMap(latlng)

After this line of code latlng = data[0].latlng

Include MyMap(latlng);

edited Oct 7, 2020 at 19:04

answered Aug 8, 2020 at 22:27

DavidGD

12 bronze badges

2 Comments

Bergi Over a year ago

…and one needs to change the MyMap function to accept that argument, and one should avoid the global var latlng declaration.

Eitan Peles Over a year ago

Hi DavidGD, I'm sorry, but didn't understand. Could you write the code to show your point? Thank you!

Collectives™ on Stack Overflow

JavaScript - How to access a variable from another function?

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related