JavaScript intermittently loads different number of objects into array

Question

Currently I'm pushing new objects into an array within a $.each() loop. Most of the time the array loads all of the objects, but randomly it only loads some of them. For example, it might load the objects from both elements in AddtionalUrls, but then it might only load the first one. It seems random, depending on how fast the data is loading.

var macArray = [];



$(document).ready(function() {
    loadMac();
});



function loadMac() {
    var AdditionalUrls = ['/_vti_bin/ListData.svc/MACCalendar','/_vti_bin/ListData.svc/QlarantCalendar'];
    $.each(AdditionalUrls, function(i,v) { 
        $.ajax({
            url: v,
            type: "GET",
            data: {
            $select: "title"
        },
        headers: {
            accept: "application/json;odata=verbose"
        },
        success: function(data) {
            $.each(data.d.results, function() {
                currObj = this;
                macArray.push({ title: this.title )};  
            });
        });
    )};           
}

How are you establishing this? Do you see all the expected requests show up in the network log? Does the success callback fire the number of times it should, i.e. equal to the number of URLs? Do any of the requests get rejected? Etc. — Mitya, May 09 '18 at 18:34
And are you taking into account that loadMac is not synchronous function, if you try to access the results after you call loadMac, they simply might not have been loaded yet. — FINDarkside, May 09 '18 at 18:50

Dharmendrasinh Chudasama · Answer 1 · 2018-05-10T05:27:15.050

I think you can use in 1 by 1 sequence

Here sequencing problem will resolve, it call another url after complation of current call, this is only valid solution of your problem, synchronization is deprecated in ajax so, it is preferrable to don't use async:false in your code

var macArray = [];

$(document).ready(function() {
    loadMac(); 
}); 

function macFiller(AdditionalUrls, i){
     if(AdditionalUrls.length >= i){
           return; //completed
     }

     $.ajax({ 
          url: AdditionalUrls[i],
          type: "GET",
          data: { $select: "title" },
          headers: { 
             accept: "application/json;odata=verbose"
          }, 
          success: function(data) {
            var curIndex = i;
            $.each(data.d.results, function() { 
                 var currObj = this;
                 macArray.push({ title: this.title )};
                 macFiller(AdditionalUrls, curIndex+1); //try for next url
            });
          }
     }); 

}

function loadMac() { 
     var AdditionalUrls = ['/_vti_bin/ListData.svc/MACCalendar','/_vti_bin/ListData.svc/QlarantCalendar'];
     macFiller(AdditionalUrls, 0);
  }

```async: false``` is deprecated https://stackoverflow.com/questions/11448011/jquery-ajax-methods-async-option-deprecated-what-now You should use Promises: — Jonathan Rys, May 09 '18 at 19:16
You should not use synchronous ajax, even though using it takes fewer lines to fix the code. — FINDarkside, May 09 '18 at 19:51

JavaScript intermittently loads different number of objects into array

1 Answers1