Javascript - Setting global variables

Question

I'm running into an issue with setting the value of global variables. When my function GetUserList() is called, it returns an array of globalUsers when it is run inside the function.

However, when I log the console again after running the function, the array being returned is empty. I feel there must be something wrong with the logic, or the manner in which the code is being executed.

I'm seeking that the value of globalUsers is set within the function for future use throughout the rest of the script.

Your assistance would be greatly appreciated. See the code below:

var globalUsers = [];
function GetUserList(){
 var userList = $().SPServices.SPGetListItemsJson({
 listName: "Users",
 CAMLQuery: "<Query><OrderBy><FieldRef Name='ID' /></OrderBy></Query>",
 async: false,
 mappingOverrides: {
 ows_Title: {
 mappedName: "Name",
 objectType: "Text"
 },
 ows_ID: {
 mappedName: "id",
 objectType: "Text"
 },
 ows_Group: {
 mappedName: "Group",
 objectType: "Text"
 }
 }
 });
 $.when(userList).done(function() {
 thisUserList = this.data;
 globalUsers = thisUserList;
 console.log(globalUsers);
 });
}
 $(document).ready(function () {
 GetUserList();
 console.log(globalUsers);
 }
 );

• AL-zami: is there anything inside thisUserList ? what type of data does it hold? did you check the type ? give the data returned by thisUserList if possible
• Umesh: Did you declare thisUserList anywhere? Also try to console.log(this.data) whether it returns something and what type

Answer 1

It's because you're not waiting until the globalUsers variable has been updated.

In the GetUserList function, you're explicitly waiting for the assignment assignment to complete before logging out the result, whereas the console.log in your $(document).ready block is executing the log immediately (as GetUserList is non-blocking).

Try logging out the value in dev tools, I bet you'll see what you're expecting (assuming the async assignment has taken place).

Alternatively, you could use a promise to ensure that you're only attempting assignment once the getUserList method has completed:

function GetUserList () {
 return new Promise((resolve, reject) => {
 var userList = $().SPServices.SPGetListItemsJson({
 listName: "Users",
 CAMLQuery: "<Query><OrderBy><FieldRef Name='ID' /></OrderBy></Query>",
 async: false,
 mappingOverrides: {
 ows_Title: {
 mappedName: "Name",
 objectType: "Text"
 },
 ows_ID: {
 mappedName: "id",
 objectType: "Text"
 },
 ows_Group: {
 mappedName: "Group",
 objectType: "Text"
 }
 }
 });
 // Should also handle errors in here somewhere, and reject if they occur...
 $.when(userList).done(function() {
 resolve(this.data);
 console.log('Logging from within getUserList: ', globalUsers);
 });
 })
}
$(document).ready(function () {
 GetUserList().then((userList) => {
 console.log(userList);
 globalUsers = userList; // Global assignment
 })
});

Also, cursory don't use global variables, mmmKay?

• user3932488: Thanks for that. How would I then explicitly wait for the execution of GetUserList() inside the $(document).ready block?
• Chirag Ravindra: @user3932488 You could pass a callback function like GetUserList(function(err,data){}) when you invoke it in $(document).ready. Inside your done handler in GetUserList(cb), you can call the callback function passing it the data when it is available. or use Promises instead of the callback
• user3932488: Thanks Chirag. I understand what you refer to using the callback function but I'm unsure at what stage I set the value of the global variable?
• monners: You could also return a resolved promise from the getUserList method. I'll update my answer with an example in a bit.