Javascript global variables only accessible after application runs

I have a series of nested Ajax requests to external APIs, which is very ugly but it was the only way I could figure out how to make calls in a specified order with each call utilizing some values brought back from the previous call. (I attempted this but couldn’t get it to work, so I reverted to the advice here.)

Anyway, this works well to a point. All my calls work in succession, and I end up with an array called people, which is just a list of names: ["name1","name2","name3"].

My problem is that I don’t seem to be able to do anything with this array from my javascript code. I can’t append them to a div, nor can I alert them, or even console.log them during code execution. However, once my code completes, I can type people into the browser console and there they all are, as expected.

I am guessing this has something to do with the scope of the variable – I have tried making it global and moving the placement of its declaration, but the only way I can access people from the runnable code is from within the final AJAX loop, and then I get lots of repeating values because it’s looping and adding to the array incrementally.

The goal here is to get people from that final API call and list them in HTML.

Here’s my code. Any suggestions greatly appreciated.

HTML to trigger event:

<input type='file' accept='image/*' onchange='openFile(event)'>
<!--process is triggered by file upload-->

javascript:

    var openFile = function(event) {

    //... Some UI stuff happens here.
    //... When finished, just call getGraph(); below

    performances = new Array();  // global scope
    people = new Array();  // global scope
    getGraph();  // call function below

    console.log(people);   // retrieve array; doesn't work
  };  

   function getGraph(){ 
    $.ajax({
       url:'http://...' + document.getElementById('prDate').value,
       dataType:'json',
       success: function(response){
           $.each(response, function(i, item) {
               var programID = item.id;
                 $.ajax({
                    url:'http://...'+ programID',
                    dataType:'json',
                    success: function(response){
                        $.each(response, function(i, item) {
                            performances.push( item.id );
                        });
                        $.each(performances, function(index, value){
                            $.ajax({
                               url:'http://...' + this.valueOf() +'/persons/',
                               dataType:'json',
                               success: function(response){
                                   $.each(response, function(i, item) {
                                       people.push( item.firstname + ' ' + item.lastname );  // the magic moment
                                    }); 
                                } 
                            }); 
                        }); 
                    }
                });
            });
        }
    }); 
} 


Source: ajax

Leave a Reply