CODEWITHSUNDEEP
javascriptjqueryajax
Jaspreet Chauhan
Jaspreet Chauhan

Reputation: 191

Get data back from ajax call within ajax call

I'm need some help figuring out how to get back data from the second ajax call, not the first.

I have this method that calls my ajax calls

var projectWithIssues = getProjects().done(function(result) {
....
}

When I look at the results from this, I get back the results on my first ajax call(getEnt_PodType().done()). I want to get the results from the second ajax call within getProjects(). I understand the reason I'm getting the first results back is because I have the return on the first ajax call. However, If I don't have a return there. I get a undefined on the line above. How can I return the data from the second call?

function getEnt_PodType() {
var ent_PodType;
var oDataUrl = //URL to my data;
return $.ajax({
    url: oDataUrl,
    type: "GET",
    async: true,
    beforeSend: function (xhr) {
        xhr.setRequestHeader("ACCEPT", accept);
    },
    success: function (xhr, textStatus) { 

    }
});
}


function getProjects() {

return getEnt_PodType().done(function (res) {
    var ent_PodType;

    if (res.d.results != undefined) {
        ent_PodType = res.d.results[0].Ent_PodType;
    }
    console.log("The ent pod type value is " + ent_PodType);

    var QUERY_FILTER = 
        "$filter=Ent_PodType eq '" + ent_PodType + "'";

    var url = restUrl + QUERY_FILTER;

    // I want to return the results from this ajax call
    $.ajax({  
        url: url,
        type: "GET",
        async: true,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("ACCEPT", accept);
        },
        success: function (xhr, textStatus) {
            //projects = parseODataResultTest(xhr);
            //return projects;
        }
    });
});
}

Thanks in advance!

Upvotes: 1

Views: 342

Answers (2)

Alnitak
Alnitak

Reputation: 339816

Use .then instead of .done, it allows better chaining of functions.

Break your code apart so that the two AJAX calls are in separate functions, and have both those functions return the result of their $.ajax call. You can then use:

func1().then(func2).then(...);

func2 will be passed the result of the first AJAX call, and then the result of that will be passed to whatever function is in the final then.

In your case you can also put the call to parseODataResultTest in the chain and then the final function will (eventually) be called with the required data, i.e.:

getEnt_PodType().then(getProjects).then(parseODataResultTest).then(function(projects) {
    // use projects here, and _only_ here because it won't
    // be in scope or defined anywhere else
    ...
});

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try utilizing pattern found at deferred.then

// first request
var request = $.ajax(url1), 
  chained = request.then(function( data ) {
    console.log(data) // first request response data
    // return second request
    return $.ajax(url2)
  });

chained.then(function( data ) {
  console.log(data) // second request response data
  // data retrieved from url2 as provided by the first request
});


    var request = $.ajax("https://gist.githubusercontent.com/guest271314/23e61e522a14d45a35e1/raw/62775b7420f8df6b3d83244270d26495e40a1e9d/ticker.json"), // first request , `html` document
      chained = request.then(function( data ) {
        console.log(data) // `["abc"]`
// return `data` from second request
        return $.ajax("https://gist.githubusercontent.com/guest271314/6a76aa9d2921350c9d53/raw/49fbc054731540fa68b565e398d3574fde7366e9/abc.txt")
      });
     
    chained.then(function( data ) {
      console.log(data) // `abc123`
      // data retrieved from url2 as provided by the first request
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Upvotes: 1

Related Questions