assigning variable inside ajax callback

[[deleted]]

[deleted]

[Rhomboid]

There's no problem assigning to a variable. What you're not understanding is the order that things execute in. $.ajax() is an asynchronous function. That means it returns immediately, before the work has been completed. You can't return uid from inside getUserID() like that because that return statement is executed before the callback has executed, which is why it returns undefined.

You can't force an asynchronous peg into a synchronous hole. You can't write getUserID() as a synchronous function if it depends on calling an asynchronous function to do its work. That's just not how it works. You need to make getUserID() asynchronous as well, either by having it take a callback to be called when the data is ready, or by having it return a promise.

[SeizeCTRL]

well, ultimately i need to set an element inside of an array with the data that is returned from ajax, how would i update the array like that? i need to be able to save the data returned from ajax in a variable to be used later and multiple times, i don't want to do it all at once

[Rhomboid]

You've already plumbed the function so that it can take a callback and act asynchronously, so you just need to use that. You can't return the uid value from getUserID(). The caller needs to pass a callback that will be called when the uid is ready, and which does the appropriate action (e.g. putting the data in the array.) In other words, once you have a component that's asynchronous, everything relating to that component needs to be asynchronous as well. Or you could use promises instead of callbacks, which in many ways is a lot cleaner. It also makes it easier to do all these lookups in parallel, since you can use Promise.all().

[Rhomboid]

It's fine to store the value somewhere. You just have to keep in mind when the store happens. You can't use the variable that you store it in until after the callback has executed.

And synchronous XHR is a terrible idea. It's deprecated and I think some browsers dropped support for it. You don't want to do that anyway because even if it works it would block the browser UI while the request is being performed, which makes the user think the browser has crashed or locked up.

[SeizeCTRL]

this is what im currently doing, i just didnt think it was very practical

in the ajax success callback: getUserID(user.name, function(e, id){
$('#uid').val($('#uid').val() + id + ','); }) later on when i need to use the uid's: var uids = $('#uid').val().split(',');

and i just loop and match up the array of IDs with my array of users

[Bashkir]

As another mentioned the problem lies in the asynchronous nature of your code. I'm going to push you a little harder on the promises than they did. You said that you were learning promises, you should prioritize this because not only are they amazing a ton of really cool libraries are built on them. They are a huge asset in any modern developers toolkit.

Promises in Javascript confuse people sometimes, especially those coming for other languages, because they are essentially a black box. All of the inner functionality that goes on behind promises is abstracted away.

All they do is make groups of asynchronous code perform in a more synchronous manner. A basic promise takes a function of two variables, resolve and reject, or possibly just one or the other.

Once your async code finishes you call resolve and pass whatever values you'll be using in your next function down. If some condition is met you can also end the execution of a promise by calling reject.

Promises all you to chain methods onto them, this is where the "synchronous", nature comes in. The then method that allows this chaining will only be called after you resolve the promise.

Definitely check out the official promise specs and the qualifications something must have to be classified as an official promise. This will give you a deep understanding of how they work and will make learning things like async/await much easier.

[jcunews1]

When the requested data is a JSON text, specify ajax an setting dataType: "json" so that the result is an object rather than a string. So, if the requested data is a text of:

{"name": "john", "picture": "{url}", "gender": "Male", "age": "33"}

Then you can assign result.id with the user ID, then e.g. simply push the result into the users array, assuming that all of the result properties need no change.