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
});
Related
I know this question have been asked many times, but I can't make it work.
Here is my situation. I had a string called data, and I want to unshorten all the link inside that string.
Code:
var Bypasser = require('node-bypasser');
var URI = require('urijs');
var data = 'multiple urls : http://example.com/foo http://example.com/bar';
var result = URI.withinString(data, function(url) {
var unshortenedUrl = null;
var w = new Bypasser(url);
w.decrypt(function(err, res) {
// How can I return res ?
unshortenedUrl = res;
});
// I know the w.descrypt function is a asynchronous function
// so unshortenedUrl = null
return unshortenedUrl;
});
Let's me walk you through the code.
URI.withinString will match all the URLs in data, manipulate it and return the result.
You can view an example from URI.js docs
What I want to with these URLs is to unshorten all of them using node-passer.
This is from node-bypasser document:
var Bypasser = require('node-bypasser');
var w = new Bypasser('http://example.com/shortlink');
w.decrypt(function(err, result) {
console.log('Decrypted: ' + result);
});
This is the result that I want multiple urls : http://example.com/foo_processed http://example.com/bar_processed
I created a notebook at tonicdev.com
Solution
var getUrlRegEx = new RegExp(
"(^|[ \t\r\n])((ftp|http|https|gopher|mailto|news|nntp|telnet|wais|file|prospero|aim|webcal):(([A-Za-z0-9$_.+!*(),;/?:#&~=-])|%[A-Fa-f0-9]{2}){2,}(#([a-zA-Z0-9][a-zA-Z0-9$_.+!*(),;/?:#&~=%-]*))?([A-Za-z0-9$_+!*();/?:~-]))"
, "g"
);
var urls = data.match(getUrlRegEx);
async.forEachLimit(urls, 5, function (url, callback) {
let w = new Bypasser(url);
w.decrypt(function (err, res) {
if (err == null && res != undefined) {
data = data.replace(url, res);
callback();
}
});
}, function(err) {
res.send(data);
});
You don't really understand what callback is. The callback serves to allow asynchronous code to run without Javascript waiting for it. If you were less lazy and added some debug in your code:
console.log("Started parsing");
var result = URI.withinString(data, function(url) {
console.log("URL parsed (or whatever)");
var unshortenedUrl = null;
var w = new Bypasser(url);
w.decrypt(function(err, res) {
// How can I return res ?
unshortenedUrl = res;
});
// I know the w.descrypt function is a asynchronous function
// so unshortenedUrl = null
return unshortenedUrl;
});
console.log("Call to library over");
You would (most likely) see messages in this order:
Started parsing
Call to library over
URL parsed (or whatever)
The answer: Callback is not guaranteed to run before any code you execute after assigning it. You can't put data in your result variable because the data might not be fetched yet.
I'm attempting to implement an asynchronous computed observable as show here.
I can do it successfully for one ajax call. The challenge I have at the moment is how to perform various ajax calls in a loop building an array asynchronously and then returning the array to my computed observable array using jQuery promises.
Basically the HTML form works in the following way:
This a student course form.
For each row, users type the person number and on another column they'll type a list of course ids separated by commas. Eg 100, 200, 300.
The purpose of the computed observable is to store an array
containing course details for the courses entered in step 2.
The details are obtained by firing ajax calls for each course and storing HTTP response in the array.
I don't want users to wait for the result, thus the reason to implement an async computed observable.
My problem: I'm having problem returning the value of the final array to the observable. It's always undefined. The ajax calls work fine but perhaps I'm still not handling the promises correctly.
Here's the code for my class:
function asyncComputed(evaluator, owner) {
var result = ko.observable(), currentDeferred;
result.inProgress = ko.observable(false); // Track whether we're waiting for a result
ko.computed(function () {
// Abort any in-flight evaluation to ensure we only notify with the latest value
if (currentDeferred) { currentDeferred.reject(); }
var evaluatorResult = evaluator.call(owner);
// Cope with both asynchronous and synchronous values
if (evaluatorResult && (typeof evaluatorResult.done == "function")) { // Async
result.inProgress(true);
currentDeferred = $.Deferred().done(function (data) {
result.inProgress(false);
result(data);
});
evaluatorResult.done(currentDeferred.resolve);
} else // Sync
result(evaluatorResult);
});
return result;
}
function personDetails(id, personNumber, courseIds) {
var self = this;
self.id = ko.observable(id);
self.personNumber = ko.observable(personNumber);
self.courseIds = ko.observable(courseIds);
// Computed property to extract PIC details for additional PICs.
// This is computed observable which returns response asynchronously
self.courseDetails = asyncComputed(function () {
var courseIdsArray = self.courseIds().split(",");
var arr = [];
var arr_promises = [];
function getCourseDetails(courseId) {
var dfrd = $.Deferred();
var content = {};
content.searchString = courseId;
var url = 'MyURL';
return $.ajax(url, {
type: 'POST',
dataType: 'json',
data: requestData, // content of requestData is irrelevant. The ajax call works fine.
processdata: true,
cache: false,
async: true,
contentType: "application/json"
}).done(function (data) {
arr.push(new PicDetails(data.GenericIdentifierSearchResult[0]));
}).fail(function () {
alert("Could not retrieve PIC details");
}).then(function () {
dfrd.resolve();
});
}
if (courseIdsArray.length > 0) {
$.each(courseIdsArray, function (index, courseId) {
if (courseId.length > 0) {
arr_promises.push(getCourseDetails(courseId));
}
});
};
$.when.apply($, arr_promises).done(function () {
return arr;
})
}, this);
}
I think you dont really need a separate api/code for this.
You could just create observables for every input/value that changes on your site, and create a computed observable based on those.
e.g in rough pseudo code
self.id = ko.observable(id);
self.personNumber = ko.observable(personNumber);
self.courseIds = ko.observable(courseIds);
self.courseDetailsArray = ko.observableArray([]);
self.courseDetails = ko.computed(function() {
//computed the course details based on other observables
//whenever user types in more course ids, start loading them
$.get( yoururl, {self.courseIds and self.id}).success(data) {
when finished async loading, parse the data and push the new course details into final array
self.courseDetailsArray.push( your loaded and parsed data );
//since courseDetailsArray is observableArray, you can have further computed observables using and re-formatting it.
}
});
I have something a bit different from your approach, but you can build something like an asyncComputed out of it if you prefer:
make a simple observable that will hold the result
make a dictionary of promises that you'll basically keep in sync with the array of course ids
when the array of course ids change, add / remove from the dictionary of promises
wrap all your promises in a when (like you're doing) and set the result when they're all done
Basic idea:
var results = ko.observable([]);
var loadingPromises = {};
var watcher = ko.computed(function () {
var ids = ko.unwrap(listOfIds);
if (ids && ids.length) {
ids.forEach(function (id) {
if (!loadingPromises.hasOwnProperty(id)) {
loadingPromises[id] = $.get(url, {...id...});
}
});
var stillApplicablePromises = {};
var promises = []; // we could delete from loadingPromises but v8 optimizes delete poorly
Object.getOwnPropertyNames(loadingPromises).forEach(function (id) {
if (ids.indexOf(id) >= 0) {
stillApplicablePromises[id] = loadingPromises[id];
promises.push(loadingPromises[id]);
}
});
loadingPromises = stillApplicablePromises;
$.when.apply(this, promises).then(function () {
// process arguments here however you like, they're the responses to your promises
results(arguments);
});
} else {
loadingPromises = {};
results([]);
}
}, this);
This is the file (that may change) where you can see this "in real life": https://github.com/wikimedia/analytics-dashiki/blob/master/src/components/wikimetrics-visualizer/wikimetrics-visualizer.js
And the basic fiddle: http://jsfiddle.net/xtsekb20/1/
I've got a factory function that won't return a variable I'm trying to set in my controller. I don't get an error though, just the variable won't get set to what it's suppose to.
spApp.factory('SiteService', function ($q){
var rootUrl = window.location.protocol + "//" + window.location.hostname;
var siteMap;
//returns object containing info about all sites within collection
var getSiteMap = function () {
siteMap = {};
var promise = $().SPServices({
operation: "GetAllSubWebCollection",
async: true
});
promise.then(
function (response){
map = {}; //init the map
var web = $(response).find("Web").map(function () {
return $(this).attr('Url');
});
var webTitle = $(response).find("Web").map(function () {
return $(this).attr('Title');
});
// create map
for (var i = 0; i < web.length; i++) {
var item = web[i],
title = webTitle[i],
parts = item.split('/'),
domain = parts.splice(0, 3).join('/'),
current;
if (!map[domain]) map[domain] = {url:domain, title:title ,children:{}};
current = map[domain].children;
for (var index in parts) {
var part = parts[index];
if (!current[part]) {
current[part] = {url:domain+'/'+parts.slice(0,index+1).join('/'), title:title, children:{}};
}
current = current[part].children;
}
}
siteMap = map;
}, function(reason){
alert('FAILED:' + reason);
})
console.log(siteMap);
return siteMap;
}
return{
getSiteMap:getSiteMap
}
});
Try chaining your promises like this:
var getSiteMap = function () {
siteMap = {};
var promise = $().SPServices({
operation: "GetAllSubWebCollection",
async: true
});
return promise.then(function(response){ //return your promise
// all you code
siteMap = map;
return siteMap; //return a value to another .then in the chain
});
}
Use it like this:
SiteService.getSiteMap().then(function(siteMap){
});
The issue you have is that you are working with promises. When you put your console.log outside your then() function, you are logging the variable before it has actually been resolved.
If you put your console.log inside your then() function (after sitemap is assigned), it should show the correct value, but you still won't be able to access it reliably.
I think the simplest way for you to access the siteMap value after it has been populated with data is to pass in a callback function. Eg:
var getSiteMap = function (_callback) {
siteMap = {};
$().SPServices({
operation: "GetAllSubWebCollection",
async: true
}).then(function(response){
// Process the data and set siteMap
// ...
siteMap = map;
// now pass siteMap to the callback
_callback(siteMap);
});
You would then use this in your controller like so:
SiteService.getSiteMap(function(sitemap){
// Do something with your sitemap here
});
Now while this will work, it is just one quick example, and not necessarily the best way. If you don't like callbacks, you could create a second promise that resolves only when siteMap is assigned. Also depending on your use case for getSiteMap(), you may want to cache the value, otherwise the request will be called every time.
this function gets a question from a database and is supposed to return it.
The database is a Parse object(https://www.parse.com/docs/js_guide). As indicated in the comments in the code the question is accessible from within the success function of the db call but not from outside it and simply putting the return statement inside the success block doesn't work either.
Code below. Any suggestions?
function getQuest(){
var Question = Parse.Object.extend("Question");
var query = new Parse.Query("Question");
var questlist = [];
var newquestion;
//get list of questions if chosen track is python or java. track is set globally
if (track == "python")
{
query.equalTo("track", "xstsysysus7");
} else if (track == "java"){
query.equalTo("track", "XAWqBgxFAP");
}
query.find({
success: function(questions){
// return list of questions
var i = Math.floor(Math.random()*10);
newquestion = questions[i].get('question');
console.log(newquestion); // works here
},
error: function(error){
console.log(error.message);
}
});
console.log(newquestion); //returns undefined here
return newquestion;
}
You cannot return from the callback method like this, this is an async issue, you should use a callback method to get your variable out from the method
function getQuest(callback){
var Question = Parse.Object.extend("Question");
var query = new Parse.Query("Question");
var questlist = [];
var newquestion;
//get list of questions if chosen track is python or java. track is set globally
if (track == "python")
{
query.equalTo("track", "xstsysysus7");
} else if (track == "java"){
query.equalTo("track", "XAWqBgxFAP");
}
query.find({
success: function(questions){
// return list of questions
var i = Math.floor(Math.random()*10);
newquestion = questions[i].get('question');
//call the callback method here and pass your variable as a param
if(callback != null && callback != undefined){
callback(newquestion);
}
},
error: function(error){
console.log(error.message);
}
});
}
Now you can call your getQuest method just like this instead of using var newQ = getQuest()
getQuest(function(newQuestion){
// do your stuff with newQuestion
})
The callbacks (success and error), are asynchronous. They have probably not been executed before your function returns.
I'm having trouble figuring out how to access object properties in Javascript. I have a function that returns an object, and I can see that object and all of its properties when it is logged to the console in Safari, but I can't get the property values for other functions. For example trying to alert out one of the properties returns 'undefined'.
The function that generates a object
getProfile : function() {
FB.api('/me', function(response) {
facebook.profile.user_id = response.id;
facebook.profile.name = response.name;
facebook.profile.firstName = response.first_name;
facebook.profile.lastName = response.last_name;
facebook.profile.gender = response.gender;
});
FB.api('/me/photos', {limit: 8}, function(response) {
facebook.profile.numPhotos = response.data.length;
for (key in response.data) {
var photoUrl = response.data[key].source;
eval('facebook.profile.photo' + key + '= photoUrl');
}
});
return facebook.profile;
}
Trying to use that function in another script
function loadProfile() {
var profile = facebook.getProfile();
console.log(profile);
alert(profile.name);
}
The function getProfile invokes FB API function FB.api which executes an asynchoronous HTTP request. In your loadProfile function call you call getProfile which immediately returns facebook.profile object which is not populated with data yet since the HTTP request is not finished yet.
Consider following change:
getProfile : function(fCallback) {
var bInfo = false,
bPhotos = false;
FB.api('/me', function(response) {
facebook.profile.user_id = response.id;
facebook.profile.name = response.name;
facebook.profile.firstName = response.first_name;
facebook.profile.lastName = response.last_name;
facebook.profile.gender = response.gender;
bInfo = true;
if (bPhotos)
fCallback(facebook.profile);
});
FB.api('/me/photos', {limit: 8}, function(response) {
facebook.profile.numPhotos = response.data.length;
for (key in response.data) {
var photoUrl = response.data[key].source;
eval('facebook.profile.photo' + key + '= photoUrl');
}
bPhotos = true;
if (bInfo)
fCallback(facebook.profile);
});
}
and call this function the following way now:
function loadProfile() {
facebook.getProfile(function (profile) {
alert(profile.name);
});
}
The reason why ou could see fields in the console is because you introspected the object after the asynch call was successfully executed. The alert call however executed immediately in the same thread on a not yet populated object.
Though 'Sergey Ilinsky' might have considered a right ground, but there are more things, that can be taken into consideration. Usually comes by mistaken, and hard to debug.
Sometime its so happens, that your object-keys contains spaces, let say:
var myObj = new Object();
myObj['key1'] = 'val1';
myObj['key2'] = 'val2';
myObj['key3 '] = 'val3'; //the key contains spaces here
myObj['key4 '] = 'val4'; // the key contains spaces here
so, when you log it to console by console.log(myObj), you will get:
Object { key1="val1", key2="val2", key3 ="val3", key4 ="val4"}
But when you access:
alert(myObj.key1); //Ok: val1
alert(myObj.key2); //Ok: val2
alert(myObj.key3); //undefined
alert(myObj.key4); //undefined
alert(myObj['key3']; //undefined
alert(myObj['key4']; //undefined
These are the common areas of mistakes, where one mistakenly puts the space, may be while doing copy-paste, and it so happens, that one says, console log is able to show it, but I cannot access it.