Jquery POST not populating array

Question

I am trying to populate an array with a JSON entries in reference to HighCharts.

One of the JSON objects is manually populated and one needs to be populated dynamically with a PHP post. I have been trying to use a callback function to push data to the array, but no data seems to get pushed.

I am able to verify the data comes back from the PHP Post. It seems like it does populate the array, but once the Jquery POST function is complete, it seems like the array is emptied.

Also, I have a console.table call inside of the POST. This one actually prints the array correctly.

You can see from the code below, that I use a console.table() call immediately after the post, and it is empty. But after I push manually next, the data array now has the data inside of it for the manually JSON array push.

Any ideas?

Here is my code:

/* INITIAL ARRAY **************************************/
data_array = [];
var colors = Highcharts.getOptions().colors;
categories = ['Dynamic', 'Manual'];

/* FUNCTION TO PUSH TO ARRAY *****************************/
function push_toarray(cats,counts) {

    data_array.push({
        y: 10.38,
        color: colors[1],
        drilldown: {
            name: 'Dynamically Populated',
            categories: [cats],
            data: [counts],
            color: colors[1]
        }
    });       
}

/* PHP AND FOR LOOP FOR GETTING DATA *********************************************/


    $.post( "php/dt_charts.php")
        .done(function( data ) {
        var obj = jQuery.parseJSON(data);

        // To verify the values are returned
        console.log(obj.fe_det_name);  
        console.log(obj.fe_det_count);

        push_toarray(obj.fe_det_name, obj.fe_det_count);
        console.table(data_array);  // This prints the array correctly with both JSON objects inside
    });

    //console.table(data_array);  // This prints no data.

/* MANUAL DATA ARRAY *********************************************/


    data_array.push({
        y: 10.38,
        color: colors[1],
        drilldown: {
            name: 'Manually Populated',
            categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
            data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
            color: colors[1]
        }
    })


console.table(data_array); // This prints only the manually populated array values

Answer 1

  $.post( "php/dt_charts.php")
     .done(function( data ) {
    var obj = jQuery.parseJSON(data);

    // To verify the values are returned
    console.log(obj.fe_det_name);  
    console.log(obj.fe_det_count);

    push_toarray(obj.fe_det_name, obj.fe_det_count);
    console.table(data_array);  // This prints the array correctly with both JSON objects inside

<----- move your logic here,

});

Move your logic there and if you cant than put your logic in a function and call that function inside your done callback.