How to pass the value of the Fetch API to a variable?

Question

Folks!

I'm trying to get the latitude or longitude of a location using the Google Maps API. But I don't know how to return a value using the Fetch API and its promises.

I can log the latitude and longitude with:

let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=london'

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data.results[0].geometry.location.lat)
    console.log(data.results[0].geometry.location.lng)
  })

Output:

51.5073509
0.1277583

But I want to encapsulate this code in a function:

function getLatitudeOrLongitude(url, LatitudeOrLongitude) {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      if (LatitudeOrLongitude === 'latitude')
        return data.results[0].geometry.location.lat
      else
        return data.results[0].geometry.location.lng
    })
}

let latitudeOfLondon = getLatitudeOrLongitude(url, 'latitude')

console.log(latitudeOfLondon)

Output:

undefined

Could someone point me what is wrong? Thanks you all!

Edit: Here you can find a JS Bin with the code

Thanks @adeneo! What could I do instead to accomplish the same task? — vcamargo, Oct 18 '16 at 22:53
You can only use the result inside a callback, or in this case a `then` handler — adeneo, Oct 18 '16 at 22:53
I see. So I should try another library instead? Maybe jQuery's ajax? — vcamargo, Oct 18 '16 at 22:56
Nope, all asynchronous code works the same way, you have to work with it, and access the data when it's actually returned. — adeneo, Oct 18 '16 at 22:57

score 4 · Answer 1 · answered Oct 18 '16 at 22:52

You must use .then to handle the result of a promise:

function getLatitudeOrLongitude(url, LatitudeOrLongitude) {
  return fetch(url)
    .then(response => response.json())
    .then(data => {
      if (LatitudeOrLongitude === 'latitude')
        return data.results[0].geometry.location.lat
      else
        return data.results[0].geometry.location.lng
    })
}

getLatitudeOrLongitude(url, 'latitude')
  .then((latitudeOfLondon) => console.log(latitudeOfLondon));

How to pass the value of the Fetch API to a variable?

1 Answers1