jQuery Variable Not Accessible Outside of Function

Question

 $(document).ready(function() {
   $.wordlist = []; 
   $.get('../wordlist.txt', function(data){
     $.wordlist = data.split('\n');
   });
   console.log($.wordlist);
 });

The console.log($.wordlist) consistently returns an empty array. The same console.log call in the $.get() function successfully returns the complete array.

What am I doing wrong and how do I make this array globally accessible?

The get is async request, so your console.log shows variable before get will be performed. Use success callback as mentioned here: https://api.jquery.com/jquery.get/ — Blady214, Jan 05 '16 at 17:18

score 1 · Accepted Answer · answered Jan 05 '16 at 17:17

1

The $.get method is asynchronous. This means it is still executing when console.log is run. You need to place all code which relies on the data returned by the request within the callback function:

var wordlist = []; 
$.get('../wordlist.txt', function(data){
    wordlist = data.split('\n');
    console.log(wordlist);
});

Also note that it's not a good idea to add your own variables to the jQuery ($) namespace.

answered Jan 05 '16 at 17:17

Rory McCrossan

331,213
40
305
339

Why do you answer it even though it is duplicate? – Praveen Kumar Purushothaman Jan 05 '16 at 17:19
1

1) Because it's not an exact duplicate - the OP is not returning from a function. 2) Because not polluting the `$` with extraneous properties/functions is an important point to be made. – Rory McCrossan Jan 05 '16 at 17:20
1

OKay, thanks. That clarifies. `:)` – Praveen Kumar Purushothaman Jan 05 '16 at 17:20
Asynchronicity completely explains why this variable later returns complete data to other functions. Thanks for the jQuery namespace tips. – Ryan Foley Jan 05 '16 at 17:24
@RyanFoley no problem - glad to help. – Rory McCrossan Jan 05 '16 at 17:25

jQuery Variable Not Accessible Outside of Function

1 Answers1