How to fetch data with axios for a placeid in Google maps and React?

Question

I have an array in state restaurantsFetchedFromGoogle which currently stores 20 placeids previously fetched from google maps. They are stored in the array as such:

0:"ChIJTb1qU315MhMRiL7pihnMWfg"
1:"ChIJGZ0jXCCNMRMRrH8VHRAgEYE"
2:"ChIJQ5jaX8eMMRMRnRoZxl6X95w"
...
19:"ChIJQ5jaX8errrMRnRoZxl6X95w"

Now I'm trying to iterate the array with an Axios get request such as:

componentDidMount(){
    navigator.geolocation.getCurrentPosition(position=>{
    this.setState({geoLat:position.coords.latitude,geoLng:position.coords.longitude});
    axios.get(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${position.coords.latitude},${position.coords.longitude}&radius=50000&keyword=recensioni&type=ristorante&keyword=cena&key=MYAPIKEY`)
         .then(response => this.setState({restaurantsFetchedFromGoogle:response.data.results}));
    });
    this.state.restaurantsFetchedFromGoogle.map(item=>{
      axios.get(`https://maps.googleapis.com/maps/api/place/details/json?placeid=${item.place_id}&key=AIzaSyCZ7rgMN34kWkGvr8Pzkf_8nkT7W6gowBA`)
           .then(response => this.setState({placeId:response.data}))
           .catch(err =>{
           console.log(err);
           console.log(err.response.data.error);
    });
  });
    axios.get('/restaurants.json')
         .then(response =>this.setState({restaurants:response.data}));
  }

First and third axios request goes through but not the second one. What am I doing wrong?

score 0 · Accepted Answer · answered Jun 10 '18 at 11:00

0

Add an error handler to log the error message! That should tell you why the request is failing.

this.state.restaurantsFetchedFromGoogle.map(item=>{
axios.get('https://maps.googleapis.com/maps/api/place/details/json?placeid='+ 
item + '&key=MYAPIKEY')
   .then(response => this.setState({placeId:response.data}))
   .catch(err => {
     console.log(err)                     //Axios entire error message
     console.log(err.response.data.error) //Google API error message 
   })
});

Even without the .catch - you can use the chrome dev tools to see the error under the Network tab in the dev tools.

If you still have issues after - post the specific error message and I'll take a look.

answered Jun 10 '18 at 11:00

nxSolari

525
3
6

Forgot to mention, no error message. App loads with no issues and no error messages, not even warnings – KT-mongo Jun 10 '18 at 11:05
Do you have an axios .catch in your code? -- axios will either return a response or an error, one of which should be able to help you. Have you tried making a more simply request to the API to see if you can get SOMETHING out of the API to confirm your key & placeid are valid? – nxSolari Jun 10 '18 at 11:11
If I hardcode the request such as: `https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJAyYSATaLMRMRcfuQTscJ56I&key=MYKEY` It will respond back with the relevant placeid. All the placeids are valid since they came back from the server – KT-mongo Jun 10 '18 at 11:38
Have you tried hard coding the place details request? Start out with that, and console.log the full response or error from axios. If you are not getting an error with your current code, the request might be working. Are you sure you are accessing the data returned from the API correctly with response.data? – nxSolari Jun 10 '18 at 11:46
I'm will include in the original question the whole componentDidMount method since in this comment there is a character restriction. – KT-mongo Jun 10 '18 at 12:06
You accidentally included your API key in the post, you should remove that. :) I'll take a look at in in a few minutes. – nxSolari Jun 10 '18 at 12:16
I tried to run your code, and was presented with a CORS error which lead me to this stackoverflow post about it (https://stackoverflow.com/questions/44336773/google-maps-api-no-access-control-allow-origin-header-is-present-on-the-reque) which says you can't use axios for the maps API, you must use google's own JS library here (https://developers.google.com/maps/documentation/javascript/tutorial) Additionally, in your code - I think you might have an issue using setState like you are. The first request (getting the array of place IDs) might not complete by the time you call the second. – nxSolari Jun 10 '18 at 12:33
no issues with the cors on my end. I have included google relevant plugin which allows cross origin resources. Indeed, there is an issue with the asynchronous requests. I have moved the 2nd axios request on an onClick event and when I'm clicking the relevant button the placeId in state is correctly populated... – KT-mongo Jun 10 '18 at 12:37

How to fetch data with axios for a placeid in Google maps and React?

1 Answers1