0

I'm new to JS and am currently immersing myself in asynchronous functions and promises. Having quite some experience in Python and R, this is totally new for me. I read many different websites, topics and solutions for returning a value in an asynchronous function - but I can't get it to work. Below I boiled it down to a simplification of the function I wrote, designed to get information from google about a location and return it. Simple as that. I followed the advice online and tried to rewrite the following advice from Benjamin Gruenbaum on How do I return the response from an asynchronous call?.

async function foo(){
    var data = await fetch("/echo/json"); // notice the await
    // code here only executes _after_ the request is done
    return data.json(); // data is defined
}

Please see my own code below. It seems to me that it I'm doing the same thing, but it still logs as Promise {<pending>}... What am I doing wrong? data should be an array. Even if I only replace my googleapi url and use fetch() and .json(), it logs as Promise {<pending>}. 

async function foo() {
  var data = await axios.get("https://maps.googleapis.com/maps/api/geocode/json?address=Amsterdam&key=API_KEY");
  return data;
}
      console.log(foo())
Peter
  • 343
  • 5
  • 17

2 Answers2

1

try This way of calling async function

 async function foo() 
    {
      let response = await fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=Amsterdam&key=API_KEY`);
      let data = await response.json()
      return data;
    }

    foo().then(data => console.log(data));
Vishal Pawar
  • 356
  • 4
  • 12
  • Beautiful! This works! I now get the array in my console. How do I assign variables from this array? For example: `var latitude = data.results[0].geometry.location.lat` ? – Peter May 07 '20 at 10:09
  • 1
    Yes. If there are multiple rows, then you can loop the result and assign it fora each row like you said above. – Vishal Pawar May 07 '20 at 10:12
  • Thanks so much for your help so far! but I still can't get it to work. If I do `var lat = foo().then(data => data.results[0].geometry.location.lat);` `var lng = foo().then(data => data.results[0].geometry.location.lng);` `var latlng = "[" + [lat, lng] + "]";` `console.log(latlng)` The result is a log of `[[object Promise],[object Promise]]` – Peter May 08 '20 at 06:59
0

Can you try below code to know what is going on in the "data" you got . This is not the solution of your problem but just you will know what you got in result 

console.log(JSON.stringify(foo()));
Vishal Pawar
  • 356
  • 4
  • 12
  • Thanks for your response. This logs `{}`. Do I have to worry? – Peter May 07 '20 at 09:44
  • This means you got blank response from the server. first verify that you got some response by applying correct API key.Just Copy Paste url with right API key in browser and confirm the response you got.If it gives you valid response ,Let me know, – Vishal Pawar May 07 '20 at 09:47
  • Yes, if I copy paste the url I'm feeding to `axios.get`, I see the array with all the information. – Peter May 07 '20 at 09:49
  • can you try below code . async function getUserAsync(name) { let response = await fetch(`https://api.github.com/users/${name}`); let data = await response.json() return data; } getUserAsync('yourUsernameHere') .then(data => console.log(data)); – Vishal Pawar May 07 '20 at 09:57