CODEWITHSUNDEEP
javascriptjqueryajaxasynchronous
user65165
user65165

Reputation: 972

AJAX calls and asynchronicity

I'm calling on two urls to get data and put on a table. Problem is, when there's only one ajax call everything is loaded in order it's supposed to. When there're two, all hell breaks loose.I started with promises but was told it wasn't a good idea [edit1] the way i was implementing it. suggestions please?

example of code:

 $.ajax({
"url":url1,
"crossDomain":true,
"dataType":"jsonp",
'success': function(response){ 
var datee = response.results.collection1[0].date;
var collection = response.results.collection2;
$(".table-group1").append('<tr><td class=well">'+ datee.substr(56,60) +'</td></tr>');
for (var i = 1; i < collection.length; i++){   
    $(".table-group1").append('<tr>' + '<td class="well">' + collection[i].domain.href + '</td>' + '<td class="well">' + collection[i].dns + '</td>' + '<td class="well">' + collection[i].mail + '<td class="well">' + collection[i].web + '</td>' +'</tr>');}},
error: function(err){
          alert('error!' + err);
      } 
});

 $.ajax({
    "url":url2,
    "crossDomain":true,
    "dataType":"jsonp",
    'success': function(response){ 
    var datee = response.results.collection1[0].date;
    var collection = response.results.collection2;
    $(".table-group1").append('<tr><td class=well">'+ datee.substr(56,60) +'</td></tr>');
    for (var i = 1; i < collection.length; i++){   
        $(".table-group1").append('<tr>' + '<td class="well">' + collection[i].domain.href + '</td>' + '<td class="well">' + collection[i].dns + '</td>' + '<td class="well">' + collection[i].mail + '<td class="well">' + collection[i].web + '</td>' +'</tr>');            
  }},
      error: function(err){
          alert('error!' + err);
      } 
});

Desired output is a table with two columns for each property (domain, dns, email web) from both url1 and url2.

html table:

<div class= "container_1">


<table class="table" border="1">
<th class="panel-heading"> </th>
<tr class="domain"> </tr>
<tr class="table-group1">
</tr> 
</table>

Upvotes: 0

Views: 70

Answers (2)

Jaromanda X
Jaromanda X

Reputation: 1

Here's how you'd handle the ajax side

var p1 = $.ajax({
    url: url1,
    crossDomain: true,
    dataType: "jsonp"
});
var p2 = $.ajax({
    url: url2,
    crossDomain: true,
    dataType: "jsonp"
});

Promise.all([p1,p2])
.then(function(results) {
    //results[0] is the the same as response in your code for url1
    //results[1] is the the same as response in your code for url2
});

As you now have all the data at hand, you should be able to format the output as you require

Upvotes: 2

jfriend00
jfriend00

Reputation: 708136

If you want to sequence your two ajax calls so one finishes before the other is started, just do this;

$.ajax(...).then(function() {
    return $.ajax(...);
}).then(function(){
    // both are done here
});

Upvotes: 1

Related Questions