Can't use variable from anonymous function outside scope in javascript

Question

I have a very simple setup:

var genres;
$.get('/api/genres', '', function (response) {
    genres = response.data
}, 'json');
$("#genre").tagit({
    availableTags: genres //this doesn't work
});

For some reason the genres variable is not accessible inside the tagit method. How would I achieve this?

`$.get` is an asynchronous function. Place your `$("#genre").tagit` line instead of the callback. — Mike Cluck, Oct 07 '14 at 17:30
Asynchronous call, `genres` is not defined until `.get` is done. — Karl-André Gagnon, Oct 07 '14 at 17:30
By putting `$("#genre").tagit({ availableTags: genres });` inside `function (response) {`. Ajax request is asynchronous. Asynchronous. — Regent, Oct 07 '14 at 17:30

William Barbosa · Answer 1 · 2014-10-07T17:33:33.723

$.get is asynchronous. It's not that genres is not accessible inside .tagit. Your problem is that by the time you try to use it, it's still unassigned. A way to fix it would be moving your .tagit function inside the callback:

var genres;
$.get('/api/genres', '', function (response) {
    genres = response.data
    $("#genre").tagit({
        availableTags: genres //this doesn't work
    });
}, 'json');

I also recommend reading $.get's documentation.

Can't use variable from anonymous function outside scope in javascript

1 Answers1