Returning a value from a javascript function

Question

I am using the following snippet of code to return an java array of doubles to another javascript function.

    var getCredits = (function() {
    console.log('Getting credits');
    $.ajax({
        type : 'GET',
        url : rootURL+"/getCredits",
        dataType : "json", // data type of response
        success : function(data){
            var array = [];
            console.log('Credits data = '+data);
            for(var x in data){
                console.log('x = '+data[x]);
                array.push(data[x]);
            }
            console.log('credits array is '+array);
            return array;
        }
    });
});


var getDebits = (function() {
    var myArray = [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8];
    console.log('debits array is '+myArray);
    return myArray;
});

when i run the code - logs are the following -

"generating my graph" myMain.js:110 "Getting credits" myMain.js:149 "debits array is 3.9,4.2,5.7,8.5,11.9,15.2,17,16.6,14.2,10.3,6.6,4.8" myMain.js:169 "Credits data = 10.7,20.5" myMain.js:156 "x = 10.7" myMain.js:158 "x = 20.5" myMain.js:158 "credits array is 10.7,20.5"

the getDebits functionality is essentially what i want from the getCredits function. from the logs it looks like its what i want - but i am passing it into another function which looks like -

var generateMyGraph = (function() {
    console.log("generating my graph");
    $('#myLineGraph').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Finances per month'
        },
        subtitle: {
            text: 'Credit and Debit per month'
        },
        xAxis: {
            categories: ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug','Sep','Oct']
        },
        yAxis: {
            title: {
                text: 'Euro (€)'
            }
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: true
            }
        },
        series: [{
            name: 'Credit',
            data: getCredits()
        }, {
            name: 'Debit',
            data: getDebits()
        }]
    });
});

and its not working, any ideas? thanks in advance!

Looks like famous dup http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — elclanrs, Oct 26 '14 at 21:39

PeterKA · Answer 1 · 2014-10-26T21:45:41.670

Since ajax call get a response from the server asynchronously you cannot return a value from an ajax call, but you can call a function when the response arrives.

Therefore, rather than try to return a value:

return array;

Call the function that needs this data and pass the data since at this point the data you need is available:

generateMyGraph( array );

Then adjust your function to receive and use this data:

var generateMyGraph = (function( arrData ) {  //<=== local alias to 'array'
//....
    series: [{
        name: 'Credit',
        data: arrData   //<===== use data here
    }, {
//......

Returning a value from a javascript function

1 Answers1