Losing Scope within a Javascript function

Question

I have been pulling my hair out on this!

I am simply trying to hit an API endpoint which returns this exact JSON structure:

The code to retrieve this data is as follows:

let POSData = {

Users: {
        getByEmail: function(email){
            var firstName;
            var results = {};

            var url = userAPI.getUserURL+email;
            $.getJSON(url, function (posUser) {
              console.dir(posUser);
              firstName = posUser.data.firstName;

              results = {
                  firstName: firstName
              }

              alert("#1" + results.firstName);

            });

              alert("#2" + results.firstName);

              return results;
        }
    }

}

The Problem:

alert #1 DOES display the correct information.

alert #2 NEVER displays the correct information.

and finally,

the return statement NEVER has data.

WHY WHY WHY won't the correct value be returned? I just don't understand where I am going wrong.

Ideally, I would like this returned:

results = {

   firstName:  (value from json),
   lastName:   (value from json),
   profileImage: (value from json)
}

** It is quite obvious I am losing scope, but where??? **

Thanks for looking.