AJAX not overwriting global variable JQUERY - php

Question

$.each(data, function (index, info) {
var a = info.notes;
var b = info.permission;
//var c = null;
var c = null;
$.ajax({
url: "assets/getExpiration.php?expiry=" + info.expiration,
type: "GET",
dataType: "text"
}, function(data){
c = data;
});
var z = null;
switch(info.stars) {
case 0: z = "<img src='assets/img/0star.png'/>"; break;
case 1: z = "<img src='assets/img/1star.png'/>"; break;
case 2: z = "<img src='assets/img/2star.png'/>"; break;
case 3: z = "<img src='assets/img/3star.png'/>"; break;
default: z = "<label class='label label-danger'>" + c + "</label>"; break;
}
var notes = a.length > 0 ? "<i class='fa fa-file'></i>" : "";
var permission = b.length > 0 ? "<i class='fa fa-warning'></i>" : "";
if (info.status == 'EXPIRED') {
$("#pendingCall" + info.callNum).append("<button onclick=\"loadPlayer('" + info.playerTag+ "', '" + info.status + "', "+ info.callNum +")\"class='btn btn-danger disabled'>" + info.username + " " + permission + " " + notes + "</button>");
} else {
$("#pendingCall" + info.callNum).append("<button onclick=\"loadPlayer('" + info.playerTag+ "', '" + info.status + "', "+ info.callNum +")\"class='btn btn-primary'>" + info.username + " " + permission + " " + notes + "<br> " + z + "</button>");
}
});
c is not being edited. HOWEVER when I console.log(c) inside the $.ajax() it gives me the proper value. However when I console.log() outside of the $.ajax() it gives me 'null'. I've looked up MANY MANY MANY MANY stackoverflow similar questions but all the answers did not work or maybe I was just missing something.

Answer 1

Are you assuming that the code from:
var z = null;
switch(info.stars) {....
will wait for your ajax request to complete? If so, that's not quite how it works.
Ajax is going to fire of a request asynchronously whilst the rest of your code continues to execute (assuming you don't specify it should run synchronously <-- that's not a good idea though).
If you want to work with values returned by AJAX you need to add this code to the ajax options success property or similar which will be executed when it completes.

Answer 2

$.ajax is an asynchronous method that instantly returns, but will run the success and error functions after the HTTP request is completed in the background.
You will need to move your code into it's own function that is called inside the $.ajax method. Below is an example.
$.ajax({
url: "assets/getExpiration.php?expiry=" + info.expiration,
type: "GET",
dataType: "text"
}, function (data) {
c = data;
var z = null;
switch(info.stars) {
case 0: z = "<img src='assets/img/0star.png'/>"; break;
case 1: z = "<img src='assets/img/1star.png'/>"; break;
case 2: z = "<img src='assets/img/2star.png'/>"; break;
case 3: z = "<img src='assets/img/3star.png'/>"; break;
default: z = "<label class='label label-danger'>" + c + "</label>"; break;
}
var notes = a.length > 0 ? "<i class='fa fa-file'></i>" : "";
var permission = b.length > 0 ? "<i class='fa fa-warning'></i>" : "";
if (info.status == 'EXPIRED') {
$("#pendingCall" + info.callNum).append("<button onclick=\"loadPlayer('" + info.playerTag+ "', '" + info.status + "', "+ info.callNum +")\"class='btn btn-danger disabled'>" + info.username + " " + permission + " " + notes + "</button>");
} else {
$("#pendingCall" + info.callNum).append("<button onclick=\"loadPlayer('" + info.playerTag+ "', '" + info.status + "', "+ info.callNum +")\"class='btn btn-primary'>" + info.username + " " + permission + " " + notes + "<br> " + z + "</button>");
}
});