Global variable declaration in jQuery

Question

I have this code and I want to make the variable table a global variable but it doesn't work and I don't understand why, can someone help me?

      var table;
      function formatCustomerResults(obj) {
            var rows = Array();
            for (i = 0; i < obj.length; i++) {
                var item = obj[i];
                rows.push({
                    cell : [ item.guid, item.limittime, item.limitname ]
                });
            }

            console.log(rows);
            table = rows;

            return {
                total : obj.length,
                page : 1,
                rows : rows
            };
        }

        $.ajax({
            type : 'GET',
            url : 'http://localhost:6181/fintpWebServices/api/timelimits',
            dataType : 'json',
            success : function(data) {
                obj = data.timelimits;
                formatCustomerResults(obj);
            }
        });

         console.log(table);

when your calling this `console.log(rows);` does that print anything on console? — dreamweiver, Jul 01 '13 at 12:34

score 2 · Answer 1 · answered Jul 01 '13 at 12:35

2

You are making an asynchronous call, you are acting like it is synchronous. You are calling console.log() before the callback is fired. Ajax 101 stuff.

answered Jul 01 '13 at 12:35

epascarello

204,599
20
195
236

score 0 · Answer 2 · answered Jul 01 '13 at 12:36

0

Your issue is that you're calling

console.log(table);

before table is actually populated by your AJAX call and the function formatCustomerResults. Remember that the 'A' of AJAX stands for 'asynchronous'.

answered Jul 01 '13 at 12:36

Adrian Wragg

7,311
3
26
50

score 0 · Answer 3 · answered Jul 01 '13 at 12:37

Actually table variable is set before your variables updates because this code is asynchronous after using ajax

If you console after calling formatCustomerResults then it will show your table

        success : function(data) {
            obj = data.timelimits;
            formatCustomerResults(obj);
            console.log(table);// this will print data
        }

score -1 · Answer 4 · answered Jul 01 '13 at 12:36

-1

I assume that the code you're showing is wrapped by a larger function? That would explain why it's being declared locally rather than globally.

To ensure that a variable is always declared globally, simply define it as a property of the window object, so remove the line

var table;

And replace

table = rows;

with

window.table = rows;

You could also simply write

table = rows;

without declaring table as a local variable, but it's good practice to explicitly define global variables as properties of the window object (which is what global variables are) so that it's clear to a reader that your definition of a global variable is intentional.

answered Jul 01 '13 at 12:36

AmericanUmlaut

2,817
2
17
27

It's an ajax async issue, not a global variable issue. You can see that from the fact that the declaration and later output of table are within the same scope. – Reinstate Monica Cellio Jul 01 '13 at 12:41
@Archer - Yeah, I realized that after I had posted my response. The title of the question is misleading, and "it doesn't work and I don't understand why" didn't greatly clarify the issue. – AmericanUmlaut Jul 01 '13 at 12:46

Global variable declaration in jQuery

4 Answers4