0

I have a PHP file returning data in required array format to my FlotChart, it's working. Now I'm trying to get this result in my script using ajax, however I cannot see result on global variable, as described below:

myJS.js   
var EcomDashboard = function() {
    return {
        init: function() {

        var dataEarnings = NULL;

        $.ajax({
            url:"operation.php",
            dataType: "text",  
            success:function(data) {
                alert(data); //show my array [ [1, 20],[2,30],[3,14] ] 
                dataEarnings = data;
            }
        });

        alert(dataEarnings); //showing "NULL" but I need [ [1, 20],[2,30],[3,14] ]

        ...

What is the correct way to assign to my variable date Earnings the array [[1, 20], [2.30], [3.14]]?

Thompsom
  • 23
  • 1
  • 2
  • 5
  • Can't you use Json instead of Ajax? i use it almost like that and it usually works Since Ajax is asynchronos, the code reaches the alert at the same time (if not before) the ajax function, with Json, it "waits" for the function to finish and then run the rest – Paulo Lima Nov 12 '15 at 19:14
  • @PauloLima [JSON](http://json.org/): _(JavaScript Object Notation) is a lightweight data-interchange format._ – Andreas Nov 12 '15 at 19:17
  • FlotChart isn't a default json format, but I could try... How do you get result using JSON? – Thompsom Nov 12 '15 at 19:19
  • Well idk about FlotChart, I usually use this with MVC but its kind of like this `var dataEarnings = NULL; $.getJSON("", function(data) { //succes - data loaded alert(data); //show my array [ [1, 20],[2,30],[3,14] ] dataEarnings = data; }); alert(dataEarnings);` – Paulo Lima Nov 12 '15 at 19:30

3 Answers3

2

Javascript is an async language, it means it won't wait the http request to finish to execute the next line. you will have to assign the variable inside the success block. the alert shows null is becauseit got executed before the $.ajax http request line finishes.

may be you can do this using a callback:

dataAccess.js    
var ecomDashboard = function() {

            init: function(callback) {

            var dataEarnings = NULL;

            $.ajax({
                url:"operation.php",
                dataType: "text",  
                success:function(data) {
                    callback(data);
                }
            });
         }
    }

controller.js
    ecomDashboard.init(function(data){
          // data contains the array result
        // do your stuff

    })

event better: since jquery 1.5 there is incorporated promise interface, and .success is going to be deprecated. edited: thanks to Kevin B

so with promise:

    dataAccess.js    
    var ecomDashboard = function() {

                init: function(callback) {

                var dataEarnings = NULL;

                return $.ajax({
                    url:"operation.php",
                    dataType: "text"
                });
             }
        }

    controller.js
        ecomDashboard.init().done(function(data){
//do your stuff
alert(data);
}).fail(function(error){
//do stuff when error
});
Yichz
  • 9,250
  • 10
  • 54
  • 92
  • note that success: is not deprecated, but .success is. Very important distinction. There's nothing wrong with using `success: function () {}` other than the fact that using the promise signature provides more functionality, it is not deprecated. – Kevin B Nov 12 '15 at 19:35
  • @kevinB thanks for pointing out edited – Yichz Nov 12 '15 at 19:39
1
$.ajax({
  url:"operation.php",
  dataType: "text",  
  success:function(data) {        
    doSomthingOnComplete(data);
  }
});

function doSomthingOnComplete(data)
{
  // do here your work
}
Waqas Shakeel
  • 113
  • 7
0

This is occurring because that alert(dataEarnings) is executing before your ajax request resolves. The first letter in the AJAX acronym is Asynchronous. So, ultimately your data is being set properly you are just trying to access it before the asynchronous call completes.

Duane
  • 4,460
  • 1
  • 25
  • 27