Question

Long story short, I’m trying to store corresponding data values from a JSON returning AJAX into these global arrays. I know that the arrays are constructing correctly because I’ve put alerts within AJAX, but when I put it outside the AJAX, the array is still undefined.

How can I export either the entire popData JSON object to work on it and store the values in the global arrays or get the populating of the arrays in the AJAX to carry outside the call? I need these arrays to be accessible by another function to compare the population values to a narrow range of values selected by the user–if anyone wants to suggest a better way of doing this, but it has to pull the population values onLoad which is already done in the HTML. I think this is the most streamlined way to do that with the fewest AJAX calls on the server, but I’m open to suggestions! 😀

    var popProducers = new Array();
    var popProducersCount = new Array();


    function getPopulationInfo(){

        $.ajax({
            url:phpURL,
            cache:false,
            dataType:"json",
            data: { },
            success:function(popData){

                for (i=0;i<popData.length;i++){

                    //producers and producersCount should be the same length at all times!
                    //If current producer name isn't in array already
                    if(popProducers.indexOf(popData[i].ProducerName) == -1){
                        //add new element to represent new producer quantity (producerCount.length returns number of elements in the array, thus if there are no elements = 0 thus making index 0 equal to 1 and so on)
                        popProducersCount[popProducersCount.length] = 1;
                        //Adds the producer name to the list of producers
                        popProducers[popProducers.length] = popData[i].ProducerName;
                    } else {
                        //Otherwise, it will increment the index of the producersCount array corresponding with the pre-existing producer name's index by 1
                        popProducersCount[popProducers.indexOf(popData[i].ProducerName)] += 1;
                    }


                }

            }
        });

        alert("Population Data Alert: " + popProducers);

Answer 1

.ajax() and its underlaying XMLHttpRequest() create asyncronous requestes by default. That just means, your alert() statement is encountered before your success handler.

Easy solution here, move that alert() into the success handler at the very bottom.

If you want to deal with it in a more apropriate way, you could use jQuerys Deferred objects in a way like

function getPopulationInfo(){
    return $.ajax({
       // lots of stuff
    });
 }

and then call it like

getPopulationInfo().done(function() {
    alert("Population Data Alert: " + popProducers);
});

by returning the .ajax() method we implcitly return a Deferred object. Long story short, you can pass in some additional callbacks for success (.done()), error (.fail()) and complete (.always())