We Keep Coding

Capturing async call response in dojo/aspect before

Trying to capture response of a async request in dojo/aspect before() event before handing it off to the original method as below:
aspect.before(ecm.model.SearchTemplate.prototype, "_searchCompleted", function(response, callback, teamspace){
var args = [];
if(response.num_results==0 && isValidQuery){
var args = [];
var requestParams = {};
requestParams.repositoryId = this.repository.id;
requestParams.query = query;
Request.invokePluginService("samplePlugin", "sampleService",
{
requestParams: requestParams,
requestCompleteCallback: lang.hitch(this, function(resp) { // success
//call stack doesnt enter this code block before returning params to the original
//function
resp.repository = this.repository;
args.push(resp);
args.push(callback);
args.push(teamspace);
})
}
);
return args; //args is empty as the response is not captured here yet.
}
});

aspect.around is what you're looking for. It will give you a handle to the original function you can call at will (thus, async at any time you're ready - or never at all).
aspect.around(ecm.model.SearchTemplate.prototype, "_searchCompleted", function advisingFunction(original_searchCompleted){
return function(response, callback, teamspace){
var args = [];
if(response.num_results==0 && isValidQuery){
var args = [];
var requestParams = {};
requestParams.repositoryId = this.repository.id;
requestParams.query = query;
Request.invokePluginService("samplePlugin", "sampleService",
{
requestParams: requestParams,
requestCompleteCallback: lang.hitch(this, function(resp) { // success
//call stack doesnt enter this code block before returning params to the original
//function
resp.repository = this.repository;
args.push(resp);
args.push(callback);
args.push(teamspace);
original_searchCompleted.apply(this,args);
})
}
);
}
}
});

Using async / await with $.ajax

This is my first attempt to utilize asynchronous javascript. I've tried hooking up every incarnation of promises that I can find, but have not been able to write them successfully to get my string to return (i.e. $.Deferred, async/await, Promise, callbacks, relying on .done). async:false as an ajax variable works, but I'm trying to avoid settling for what I understand is bad practice. I would love to use async/await because it is so concise, but at this point I'm up for anything that works. I have a suspicion that I'm trying to utilize the $.ajax return in an incorrect manner.
Much appreciation for a working return of the string wholename (a randomized first and last name), examples of a few versions for my own education even more appreciated!
function Actor(gender, name) {
if (gender == "" || gender == undefined) {this.gender = "female";} else this.gender = gender;
if (name == "" || name == undefined) {this.name = makeName(this.gender);} else this.name = name;
}
function getPromiseName(sex) {
return promise = $.ajax({
type: "GET",
url: "TMxml.xml",
dataType: "xml"//,
//async: false //this works for returns, but is apparently bad practice
});
}
function makeName(sex) {
var fnames = [];
var lnames = [];
var thexml = getPromiseName(sex);
thexml.done(function(xml) {
if (sex == "male") {
$(xml).find('malename').children().each(function(){
fnames.push($(this).text());
});
}
if (sex == "female") {
$(xml).find('femalename').children().each(function(){
fnames.push($(this).text());
});
}
$(xml).find('lastname').children().each(function(){
lnames.push($(this).text());
});
wholename = fnames[Math.floor(Math.random() * fnames.length)] + " " + lnames[Math.floor(Math.random() * lnames.length)];
alert("wholename = " + wholename); //successfully alerts a randomized name
return wholename; //but returns undefined, or [object Promise] when using async/await
});
}

Here's what I would suggest. This is test data, so the names don't make sense, but of course all you'd have to do is change the url, the getRandomName function and the doStuffWithActor function based on your code above. (As you can see, I would recommend keeping the fetching logic and the actor initialization logic as separate as possible :)
class Actor {
constructor(name, gender) {
this.name = name;
this.gender = gender;
}
}
Array.prototype.sample = function () {
if (!this.length) return null;
const randIdx = Math.floor(Math.random() * this.length);
return this[randIdx];
};
const createActor = async (url, name, gender, callback) => {
gender = gender || 'female';
if (!name) {
const response = await fetch(url);
const data = await response.text();
name = getRandomName(data, gender);
}
const actor = new Actor(name, gender);
if (callback) callback(actor);
};
const getRandomName = (xmlData, gender) => {
const names = xmlData.split(/\s+/);
const femaleNames = names.slice(0, names.length / 2);
const maleNames = names.slice(names.length / 2);
return gender === 'female' ? femaleNames.sample() : maleNames.sample();
};
const doStuffWithActor = (actor) => {
console.log('Actor name:', actor.name);
console.log('Actor gender:', actor.gender);
console.log('\n');
};
createActor('https://httpbin.org/xml', '', '', doStuffWithActor);
createActor('https://httpbin.org/xml', '', 'male', doStuffWithActor);

You're doing it wrong. You must understand that when you work with async mode, you must use callback function to trigger the function that you want.
if you want manualy find out was sended ajax successfull, you must loop it's status with timer and check the success status - that is not recomended.
The reason that your code is working in sync mode is that, the whole javascript freezes until message is responded - that is not recomended also =)
Working ajax function:
function SendAjax($url_mode, $data_serialize, $print_container, $callback_function) {
$options = {
type: "GET",
url: $url_mode,
data: $data_serialize,
dataType: "xml",
success: function (msg) {
if ($print_container !== '') {
$print_container.html(msg);
}
if (typeof $callback_function !== "undefined") {
$callback_function(msg);
}
},
error: function (xhr, str) {
alert('Error: ' + xhr.responseCode);
}
};
$.ajax($options);
}
Calling SendAjax function:
$(document).delegate(".btn-grid", "click", function () {
SendAjax("TMxml.xml", "?any_key=true", $(".print-container-if-needed-or-set-null"), $Callback_function_like_your_makeName_function);
});

How can I pass the value of a Promise to another Function?

I'm a little new to Javascript, and am having a hard time with the asynchronous aspect of it. My program checks values of two objects, where the second object doesn't have a vital property I need in order to complete the check. So I made a promise to get that value/property (the ID), and now I need to pass that ID value along to a check function. The check function should simply return a true/false to see if the ID's match. The value of the check function is passed to another function which then acts appropriately and edits the thing if necessary. So I basically can't access the value of tick outside it's brackets. I've included the snippet of my code where all of this is happening, as all of this is easier to visualize with it. Can someone provide me with a solution to this issue? Any advice would help immensely! I want to minimize the modification of the script as much as possible.
var Q = require('q');
getID = function(instance, person, callback){
var = deferred = Q.defer();
var url = 'www.blah.com';
var options = {
'url': url
};
request.get(options, function(error, response, body){
if (error) {
deferred.reject(error);
}else{
var res = body;
var obj = JSON.parse(res);
var id = obj.id;
deferred.resolve(id);
} else deferred(obj);
});
check = function(instance, thing1, thing2){
var tick = true;
getID(instance, thing2).then(function(id)){
var id_1 = thing1.id; // thing1 passed into check with ID
var id_2 = thing2.id; // thing 2 now has id attached to it
if( id_1 == id_2 ){
tick = true; // VALUE 1
}else{
tick = false; // VALUE 2
});
// NEED VALUE 1 OR 2 OF TICK HERE
if(thing1.name == thing2.name){
tick = true;
else{
tick = false;
}
// similar checks to name but with ADDRESS, EMAIL, PHONE NUMBER
// these properties are already appended to thing1 and thing 2 so no need to call for them
};
editThing = function(instance, thing, callback){
var checked = check(instance, thing1, thing2);
if(checked){
// edit thing
}else{
// don't edit thing
};

Since you're making a promise of work to be done, and you need output from that work, you'll need pass that promise along to the code who's wanting the final output.
I'm not going to try to rewrite the code from your post, so allow me to paraphrase:
getThing = function(thing){
var deferred = Q.defer();
...
request.get(options, function(error, response, body){
if (error) {
deferred.reject(error);
} else {
...
deferred.resolve(thingMadeFromResponse);
}
});
return deferred;
}
check = function(thingWeHave, thingWeNeedFetched){
return getThing(thingWeNeedFetched).then(function(thingWeFetched)){
// check logic
checked = thingWeHave.id == thingWeFetched.id;
...
return checked;
});
};
editThing = function(instance, thing, callback){
check(thingWeHave, thingWeNeedFetched).then(function(checked) {
if(checked){
// edit thing
}else{
// don't edit thing
}
});
};

Promises
“thenable” is an object or function that defines a then method.
p.then(function(value) {
// fulfillment
console.log(value + ' is now available and passable via function argument');
}, function(reason) {
// rejection
});

Populating array with response from nested AJAX calls

I have an array that I would like to fill with responses from AJAX calls like so:
var dict = [];
function fillArray(){
$.post('getUsersOnline.php', function(phpReturnVal){
// ...
for(var i = 0; i < phpReturnVal.length; i++){
$.get("https://api.twitch.tv/kraken/streams" , function(data){
dict[data.key] = data;
});
});
}
function doStuff(){
// dict is empty or undefined here
}
How would I fill dict with objects so that I could retrieve them inside doStuff()? Currently, I am able to insert stuff into dict but when I try accessing dict outside the fillArray() function, I get an empty dict variable since I'm assuming the GET call is asynchronous and doesn't happen until after all the JS code has executed...

So, dict is an object that has no push method. You'd need dict=[]; If you had to have {}, then you'd need key:value pairs to populate it, such as:
dict[key] = value;

You are going to have to keep track of the number of calls that you are doing in that for loop and fire a callback function once they are all complete. I'm not totally confident about your current solution, with calling an indefinite amount of ajax requests, but I also don't fully understand the scope of your problem or the server that you're talking to.
So basically you will have to do something like this with what you have currently:
var dict = [],
requestsCompleted = 0;
function dictFilled() {
// do something with your dict variable;
}
function fillArray(){
$.post('getUsersOnline.php', function(phpReturnVal){
// ...
for(var i = 0; i < phpReturnVal.length; i++){
$.get("https://api.twitch.tv/kraken/streams" , function(data){
dict[data.key] = data;
requestsCompleted++;
if (requestsCompleted === phpReturnVal.length) {
dictFilled();
}
});
});
}
This haven't been tested, but basically you will have to define a function that will have access to the array that you are filling and call it once all you asynchronous requests finish successfully. For tasks like this though I recommend you take a look at jQuery's Deferred API. There is always a chance that one of those requests will fail and your application should know what to do if that happens.

I'm assuming the GET call is asynchronous and doesn't happen until
after all the JS code has executed...
Appear correct.
Try
var dict = [];
function fillArray() {
// return jQuery promise object
return $.post('getUsersOnline.php', function(phpReturnVal){
// ...
for(var i = 0; i < phpReturnVal.length; i++) {
// call same `url` `phpReturnVal.length` times here ?,
// returning same `data` response at each request ?,
// populating, overwriting `dict` with same `data.key` property ?
$.get("https://api.twitch.tv/kraken/streams" , function(data) {
dict[data.key] = data;
});
}; // note closing `}` at `for` loop
// return value
return dict
});
}
function doStuff(data) {
// `data`:`dict`, promise value returned from `fillArray`
console.log(data);
}
fillArray().then(doStuff, function error(jqxhr, textStatus, errorThrown) {
console.log(textStatus, errorThrown)
});
var arr = ["a", "b", "c"];
var response = {
"a": 1,
"b": 2,
"c": 3
};
var obj = {};
var dict = [];
function fillArray() {
return $.when(arr).then(function(phpReturnVal) {
for (var i = 0; i < phpReturnVal.length; i++) {
// return same `response` here ?
$.when(response).then(function(data) {
dict[arr[i]] = data;
});
};
return dict
});
}
function doStuff(data) {
console.log(data)
}
fillArray().then(doStuff, function error(err) {
console.log(err)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

Passing/returning value to/from a function using ajax and callback function

I'm trying to read p_info array returned from the function getproductInfo containing a ajax call but I'm getting undefined value. I'm using a callback function to achieve this but still doesn't work. Where am I wrong?
$(document).ready(function() {
function successCallback(data)
{
var name = data.name;
var image = data.image;
var link = data.link;
var product_info = [name, image, link];
console.log(product_info); // Correct: shows my product_info array
return product_info;
}
function getProductInfo(prodId, successCallback) {
$.ajax({
type: "POST",
url: "getProductInfo.php",
data: "id=" + prodId,
dataType: "json",
success: function(data) {
var p_info = successCallback(data);
console.log(p_info); // Correct: shows my product_info array
return p_info;
},
error: function()
{
alert("Error getProductInfo()...");
}
});
return p_info; // Wrong: shows "undefined" value
}
var p_info = getProductInfo(12, successCallback);
console.log(p_info); // Wrong: shows an empty value
});

The code should speak for itself. But basically, you cant return an upper-level function inside a function. You must set a variable to be used to return after the ajax is submitted.
//This makes the p_info global scope. So entire DOM (all functions) can use it.
var p_info = '';
//same as you did before
function successCallback(data) {
var name = data.name;
var image = data.image;
var link = data.link;
var product_info = [name, image, link];
return product_info;
}
//This takes prodID and returns the data.
function getProductInfo(prodId) {
//sets up the link with the data allready in it.
var link = 'getProductInfo.php?id=' + prodId;
//creates a temp variable above the scope of the ajax
var temp = '';
//uses shorthand ajax call
$.post(link, function (data) {
//sets the temp variable to the data
temp = successCallback(data);
});
//returns the data outside the scope of the .post
return temp;
}
//calls on initiates.
var p_info = getProductInfo(12);
console.log(p_info);