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);
    }
    );

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 — AL-zami
– AL-zami, Commented Jan 31, 2018 at 3:37
Did you declare thisUserList anywhere? Also try to console.log(this.data) whether it returns something and what type — Umesh
– Umesh, Commented Jan 31, 2018 at 3:41

monners · Accepted Answer · 2018-02-01 03:36:18Z

2

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?

edited Feb 1, 2018 at 3:36

answered Jan 31, 2018 at 3:43

monners

5,3422 gold badges31 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3932488 Over a year ago

Thanks for that. How would I then explicitly wait for the execution of GetUserList() inside the $(document).ready block?

Chirag Ravindra Over a year ago

@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 Over a year ago

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 Over a year ago

You could also return a resolved promise from the getUserList method. I'll update my answer with an example in a bit.

Collectives™ on Stack Overflow

Javascript - Setting global variables

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related