Making a JSON Object as Google Maps API Call in React Native - google-maps

Question

I wanted to call GoogleMapsAPI and get results with specified origin and destination. However, I cannot pass the result of the api call immediately because it returns the result after I do assign operation. I wanted to pass the result immediately but I couldn't find any proper solution. Here is my fetch code for API.
class RouteSelection extends Component {
constructor(props) {
super(props);
this.fetchApi = this.fetchApi.bind(this);
this.fetchDef = this.fetchDef.bind(this);
this.fetchFewer = this.fetchFewer.bind(this);
this.fetchLess = this.fetchLess.bind(this);
this.fetchBestGuessTraffic = this.fetchBestGuessTraffic.bind(this);
this.fetchPessimisticTraffic = this.fetchPessimisticTraffic.bind(this);
this.fetchOptimisticTraffic = this.fetchOptimisticTraffic.bind(this);
this.calcRoutes = this.calcRoutes.bind(this);
this.state = {
origin: "",
destination: "",
arrival_time: "",
def_data: [],
f_data: [],
l_data: [],
best_guess: [],
pessimistic_guess: [],
optimistic_guess: [],
};
}
fetchDef(){
fetch("https://maps.googleapis.com/maps/api/directions/json?origin=" + this.state.origin + "&destination=" + this.state.destination +"&key= API_KEY&mode=transit&alternatives=true", {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then((response) => response.json())
.then((responseData) => this.setState({ def_data: responseData.routes }))
.catch((error) => {
Alert.alert(
'Network Request Failed',
'Server cannot retrieve users from server. Please chech the internet connection',
[
{ text: 'OK' }
]
)
});
}
fetchLess(){
fetch("https://maps.googleapis.com/maps/api/directions/json?origin=" + this.state.origin + "&destination=" + this.state.destination +"&key= API_KEY&mode=transit&alternatives=true&transit_routing_preference=less_walking", {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then((response) => response.json())
.then((responseData) => this.setState({ l_data: responseData.routes }))
.catch((error) => {
Alert.alert(
'Network Request Failed',
'Server cannot retrieve users from server. Please chech the internet connection',
[
{ text: 'OK' }
]
)
});
}
fetchFewer(){
fetch("https://maps.googleapis.com/maps/api/directions/json?origin=" + this.state.origin + "&destination=" + this.state.destination +"&key= API_KEY&mode=transit&alternatives=true&transit_routing_preference=fewer_transfers", {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then((response) => response.json())
.then((responseData) => this.setState({ f_data: responseData.routes }))
.catch((error) => {
Alert.alert(
'Network Request Failed',
'Server cannot retrieve users from server. Please chech the internet connection',
[
{ text: 'OK' }
]
)
});
}
fetchBestGuessTraffic(){
fetch("https://maps.googleapis.com/maps/api/directions/json?origin=" + this.state.origin + "&destination=" + this.state.destination +"&key= API_KEY&mode=transit&alternatives=true&traffic_model=best_guess", {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then((response) => response.json())
.then((responseData) => this.setState({ best_guess: responseData.routes }))
.catch((error) => {
Alert.alert(
'Network Request Failed',
'Server cannot retrieve users from server. Please chech the internet connection',
[
{ text: 'OK' }
]
)
});
}
fetchPessimisticTraffic(){
fetch("https://maps.googleapis.com/maps/api/directions/json?origin=" + this.state.origin + "&destination=" + this.state.destination +"&key= API_KEY&mode=transit&alternatives=true&traffic_model=pessimistic", {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then((response) => response.json())
.then((responseData) => this.setState({ pessimistic_guess: responseData.routes }))
.catch((error) => {
Alert.alert(
'Network Request Failed',
'Server cannot retrieve users from server. Please chech the internet connection',
[
{ text: 'OK' }
]
)
});
}
fetchOptimisticTraffic(){
fetch("https://maps.googleapis.com/maps/api/directions/json?origin=" + this.state.origin + "&destination=" + this.state.destination +"&key= API_KEY&mode=transit&alternatives=true&traffic_model=optimistic", {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then((response) => response.json())
.then((responseData) => this.setState({ optimistic_guess: responseData.routes }))
.catch((error) => {
Alert.alert(
'Network Request Failed',
'Server cannot retrieve users from server. Please chech the internet connection',
[
{ text: 'OK' }
]
)
});
}
fetchApi() {
this.fetchFewer();
this.fetchLess();
this.fetchDef();
this.fetchBestGuessTraffic();
this.fetchOptimisticTraffic();
this.fetchPessimisticTraffic();
}
calcRoutes(){
console.log("Fewer Transfers ");
console.log(this.state.f_data);
console.log("Less Walking ");
console.log(this.state.l_data);
console.log("Default ");
console.log(this.state.def_data);
console.log("Best Guess Traffic ");
console.log(this.state.best_guess);
console.log("Optimistic Guess Traffic ");
console.log(this.state.optimistic_guess);
console.log("Pessimistic Guess Traffic ");
console.log(this.state.pessimistic_guess);
this.props.navigator.push({
id: 'UserPref',
name: 'UserPref',
});
}

Answer 1

The above code implies that there are many asynchronous calls. In order to get defined values in logs you need to implement either async/await , callback or .then() i.e resolve promise.
we will implement callback in the above code snippet:-
I will do one for you and rest is for practice...
wherever you are calling onPress={() => this.fetchApi(function(data){calcRoutes(data)}) } just pass a callback..and instead of calling calcRoutes() function from different method call it here because you don't know when will response come.
After that :
fetchApi(callback) {
this.fetchFewer(function(data){callback(data)});
}
fetchFewer(callback){
fetch("https://maps.googleapis.com/maps/api/directions/json?origin=" + this.state.origin + "&destination=" + this.state.destination +"&key= API_KEY&mode=transit&alternatives=true&transit_routing_preference=fewer_transfers", {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then((response) => response.json())
.then((responseData) => {this.setState({ f_data: responseData.routes }) callback(responseData.routes)})
.catch((error) => {
Alert.alert(
'Network Request Failed',
'Server cannot retrieve users from server. Please chech the internet connection',
[
{ text: 'OK' }
]
)
});
}
This is how callback works...
Cheers :)