Global variable does not get populated with data from ajax call

Question

I don't know what I am doing wrong but when you declare a variable in global scope with var and then you later add it a value in local scope, should not get populated the variable in the global scope as well? Because when I console.log $jUser outside of the ajax call is an empty object.

  // Initialize variables
    var $jUser = {};
    var $ajUsers = [];

    // Login POST 
    $('#frm-login').submit(function (e) {
        event.preventDefault()
        $loginButton.text('Please wait ...').prop('disabled')
        $.ajax({
            url: "/login-user",
            type: "POST",
            data: $('#frm-login').serialize(),
            dataType: "json"
        }).always(function (response) {
            $loginButton.text('Logging in').prop('disabled')
            console.log("Login", response)
            if (response.status == "error") {
                $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
                return
            }
            sessionStorage.setItem('token', response.token)
            if (sessionStorage.token) {
                $.ajax({
                    type: "GET",
                    url: "/verify-user",
                    headers: {
                        'Authorization': 'Bearer ' + sessionStorage.token
                    },
                    dataType: "json"
                }).always(function (response) {
                    console.log("Auth", response)
                    if (response.status == "error") {
                        $loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
                        return
                    }
                    $('#index-page').css('display', 'none')
                    $('#main-page').css('display', 'block')
                    $jUser = response.authData.user
                    //console.log($jUser)
                })
            }
        })
    })
    console.log($jUser)

// ADDED

if (sessionStorage.token) {
        (function userSession() {
            $('#index-page').css('display', 'none')
            $('#main-page').css('display', 'block')
            $userAvatar.attr('src', $jUser.avatar)
            $userFullname.text($jUser.first_name + ' ' + $jUser.last_name)
            console.log('hello')
        })()
    }

It does, it just hasn't **yet** as of when you log it. See the linked question's answers for what to do about it (basically: use it from the callback, not in code following the setup of the event handler). — T.J. Crowder, May 20 '18 at 09:47
but when i need to keep that data on pageload for example, what do I do? see my update in the code above — July333, May 20 '18 at 14:20
You update whatever it is you need to update when you receive it in the callback. Again, please see the linked question's answers. (Please don't **use** random boldface, **it** makes the question **hard** to read.) — T.J. Crowder, May 20 '18 at 14:41

Global variable does not get populated with data from ajax call

0 Answers0