Using jquery.when and done to pass value from one ajax call to another

Question

I am trying to use the value from the first ajax call in the second ajax call. I am using the code structure below. For some reason, the second call returns undefined for the userLocation variable . How can I reorganize my code so that the userLocation value from the first ajax call can be used in the URL of the second ajax call?

 var userLocation; function getUserLocation() { $.ajax({ url: 'https://www.example.com/location.json', success: function(response) { userLocation = response.coordinates; } }); } function getCurrentWeather() { $.ajax({ url: 'https://www.example.com/weather' + userLocation + '.json', success: function(response) { console.log(response); } }); } $(document).ready(function() { $.when( getUserLocation() ).done( getCurrentWeather() ) }); 

UPDATE 1: Thanks to the answers below, I was able to reorganize my code. Now, the value obtained from the first ajax call can be used in the second ajax call. Here is the updated code:

 var userLocation; function getUserLocation() { return $.ajax('https://www.example.com/location.json') .then(function(response) { return JSON.parse(response); }).then(function(json) { // data from the location.json file is available here userLocation = json.coordinates; }) } function getCurrentWeather() { return $.ajax('https://www.example.com/weather' + userLocation + '.json'); } getUserLocation().then(getCurrentWeather).then(function(data) { // data from the weather(userLocation).json file is available here }); 

Answer 1

jQuery ajax returns promises, which you can use:

 function getUserLocation() { return $.ajax('https://www.example.com/location.json'); // note the `return` } function getCurrentWeather(userLocation) { return $.ajax('https://www.example.com/weather' + userLocation + '.json'); } getUserLocation().then(getCurrentWeather).then(function(data) { // location data here }); 

Or, in more detail

 getUserLocation().then(function (user) { return getCurrentWeather(user); }).then(function(data) { // location data here }); 

The best solution would be to make it one call, not two calls, as many AJAX calls slow down your application, especially on mobile devices with limited bandwidth.

---

Here is a callback based approach that is likely to be inferior to the promise (e.g. with error handling), but I feel like we should show it for completeness. You can read about the general solution in this thread .

 function getUserLocation(callback) { $.ajax('https://www.example.com/location.json', callback) } function getCurrentWeather(userLocation, callback) { $.ajax('https://www.example.com/weather' + userLocation + '.json', callback); } getUserLocation(function(user) { getCurrentWeather(user, function(weather) { console.log("Got weather", weather); }); }); 

Answer 2

For some reason, the second call returns undefined for the userLocation variable

This is because you are not returning a promise from an ajax call, see Benjamin's answer on how to do this.

How can I reorganize my code so that the userLocation value from the first ajax call can be used in the URL of the second ajax call?

Recover your code to insert another function call during the first call:

 var userLocation; function getUserLocation() { $.ajax({ url: 'https://www.example.com/location.json', success: function(response) { // set the user location userLocation = response.coordinates; // make call to second function passing in userLocation getCurrentWeather(userLocation); } }); } function getCurrentWeather(userLocation) { $.ajax({ url: 'https://www.example.com/weather' + userLocation + '.json', success: function(response) { console.log(response); } }); } $(document).ready(function() { getUserLocation() }); 

If you are not using the userLocation variable elsewhere, save some code:

 function getUserLocation() { $.ajax({ url: 'https://www.example.com/location.json', success: function(response) { // make call to second function passing in coordinates from response getCurrentWeather(response.coordinates); } }); } function getCurrentWeather(userLocation) { $.ajax({ url: 'https://www.example.com/weather' + userLocation + '.json', success: function(response) { console.log(response); } }); } $(document).ready(function() { getUserLocation() }); 

Answer 3

You must do this:

 function getUserLocation() { return $.ajax({ url: 'https://www.example.com/location.json', success: function(response) { userLocation = response.coordinates; } }); } function getCurrentWeather(userLocation) { return $.ajax({ url: 'https://www.example.com/weather' + userLocation + '.json', success: function(response) { console.log(response); } }); } $(document).ready(function() { $.when( getUserLocation() ).done( getCurrentWeather ) }); 

• returns $.ajax(...) from getUserLocation
• getCurrentWeather is passed as a function, you should not call it in done, it is called async after getUserLocation is completed.

Edit # 2 : what you are doing wrong when setting getCurrentWeather() to .done(...) is that this function will call immediately. However, .done(...) must be passed to functions where the function will be called after the promise of $.when() is resolved.

As Benjamin Gruenbaum said, it is better to use .done(...) , then .then(...)

Answer 4

It could be like this:

 var userLocation; function getUserLocation() { $.ajax({ url: 'https://www.example.com/location.json', success: function(response) { userLocation = response.coordinates; } }).done(function() { getCurrentWeather() }); } function getCurrentWeather() { $.ajax({ url: 'https://www.example.com/weather' + userLocation + '.json', success: function(response) { console.log(response); } }); }