Native/$q Javascript For Loop Promise Resolve - javascript

I think I'm getting closer to understanding Javascript Promises, but there's a new issue with for loops. I've got a function that feeds another Spotify URIs, for the second method to retrieve track information and then return to be included in an array. So far I've been finding solutions that use the Bluebird library, but when using AngularJS, integration isn't quite as simple that I can tell.
I'm basically getting back a collection of promises that are not resolved to data.
This is the function in my controller, feeding data to the second function in services:
$scope.getUserRecent = function () {
var id = window.localStorage.getItem('id');
return UserService.getTracks(id).then(function (data) {
var tracks = {}, i;
console.log(data);
for (i = 0; i < data.length; i++) {
tracks[i] = SpotifyService.getTrack(i, data[i].uri, data[i].loved, data[i].from);
console.log(i + ": " + tracks[i]);
}
console.log(tracks);
return tracks;
})
.catch(function (error){
console.log(error);
});
};
The function on the other side works absolutely fine, pulling the data down and returning it as it should; the promises, however, are not resolved. How can I fix this?
Edit: Access to $scope.getUserRecent():
$scope.refresh = function () {
$q.all($scope.getUserRecent()).then(function (data) {
console.log(data);
$scope.tracks = data;
})
.catch(function (error) {
console.log(error);
});
$scope.$broadcast('scroll.refreshComplete');
};
$scope.$on('$ionicView.enter', function (e) {
$scope.refresh();
});
UserService.getTracks(id) returns:
[Object, Object]
0:Object
from:"string"
id:1
loved:true
sharerId:1
uri:"6mNMp0g3zkg1K7uBpn07zl"
__proto__:Object
1:Object
from:"string"
id:2
loved:true
sharerId:1
uri:"14WWzenpaEgQZlqPq2nk4v"
__proto__:Object
length:2
__proto__:Array[0]

In order to use a consumer function $scope.refresh as is you should resolve the promises, then return a new (different) one:
$scope.refresh:
Same as you wrote.
$scope.getUserRecent:
function () {
var id = window.localStorage.getItem('id');
return new Promise(function(resolve, reject) {
UserService
.getTracks(id)
.then(function (data) {
var tracks = {}, i;
console.log(data);
for (i = 0; i < data.length; i++) {
tracks[i] = SpotifyService.getTrack(i, data[i].uri, data[i].loved, data[i].from);
console.log(i + ": " + tracks[i]);
}
console.log(tracks);
resolve(tracks);
})
.catch(function (error){
console.error(error);
reject(error);
});
};
Some observation in the original OP's $scope.getUserRecent:
Please note that then function has no return value, this way you output only undefined;
return tracks; written inside the then statement returns data only to the calling environment, i.e. $scope.getUserRecent and not the outer runtime environment that is the real goal.

Related

How to read array object in angularjs

I got this array objects to be read:
These was my sample codes:
$scope.obj_qst_local_study_main = tbl_qst_local_study_main.all();
$scope.quesion_id_allocated = $scope.obj_qst_local_study_main[0];
$timeout(function(){
console.log('----------all objects----------');
console.log($scope.obj_qst_local_study_main);
console.log('-----------one object-----------');
console.log($scope.quesion_id_allocated);
},200);
When I used:
$scope.obj_qst_local_study_main[0];
The result was: undefined
My angularjs services:
.service('tbl_qst_local_study_main', function($cordovaSQLite, DATABASE_LOCAL_NAME){
var self = this;
var qst_local_study_main_array = [];
self.all = function() {
var db = $cordovaSQLite.openDB({name: DATABASE_LOCAL_NAME,location:'default'});
$cordovaSQLite.execute(db, "SELECT * FROM qst_local_study_main")
.then(function (res) {
console.log('--------Successfully read from qst_local_study_main---------');
for (var i = 0; i < res.rows.length; i++) {
qst_local_study_main_array.push(res.rows.item(i));
}
},
function (err) {
console.log(err);
});
return qst_local_study_main_array;
};
})
Your service should return a Promise. This is a super common case, because (don't be offended please) people do not understand how Promises work.
Please search the internet for an article, like this one: https://developers.google.com/web/fundamentals/getting-started/primers/promises
tl;dr Your service should return a Promise. In your case $cordovaSQLite.execute Then you can correctly handle the response by chaining thens. You also do not need the timeout. Using a timeout is super bad here!
tbl_qst_local_study_main.all()
.then(function(result) {
console.log(result);
})

Fetching data from REDIS with NODE JS and BLUEBIRD

I am trying to fetching all entries for a particular key patterns and to make the callback happen neatly, I am using Bluebird. The redis client for nodejs is node_redis for the project.
The code in redis client is -
exports.getAllRedisKeysA = function() {
var res = rclient.keysAsync("client*").then(function(data) {
// console.log(data);
}).then(function(data) {
var arrayResp = [];
for (var element in data) {
rclient.hgetallAsync(element).then(function(data) {
arrayResp.push(data);
});
};
return arrayResp;
// console.log(data);
}).catch(console.log.bind(console));
console.log(res); // gives an empty promise.
return res;
}
And this function is being called from a controller in the manner below -
var abc = rdata.getAllRedisKeysA();
// console.log(abc); // gives undefined
The console.log output inside the redis function gives an empty promise and nothing is returned to the controller.
Am I missing anything in the implementation?
Linus and Jaromanda had some real helpful comments to the question that helped me move in the right direction. I have used the below way to fetch my required data from REDIS using BlueBird Promise and here's how this needs be done.
The code below gets the required data from REDIS
exports.getRedisKeyPattern = function(pattern){
var allKeys = allKeysPattern(pattern).then(function(data){
var arrayResp = [];
var inptArr = [];
var newdata = data.slice(1)[0];
for(var i in newdata){
inptArr.push(newdata[i]);
};
return new Promise.resolve(inptArr);
});
var valuePerKey = Promise.mapSeries(allKeys, function(dt){
return getAllKeyContents(dt);
}).then(function(res){
return res;
}).catch(function(err) { console.log("Argh, broken: " + err.message);
});
return new Promise.resolve(valuePerKey);
}
function getAllKeyContents(key){
var data = rclient.hgetallAsync(key).then(function(data){
return data;
}).catch(function(err) { console.log("Argh, broken: " + err.message); });
var res = Promise.join(data, key, function(data, key){
return {
key: key,
data: data
};
});
return res;
}
From the controller, the function is called like this -
var rdata = require('../../components/redis/redis-functions');
rdata.getRedisKeyPattern("clients*").then(function(response){
return res.status(200).json(response);
});
The .js file which contains the redis functions is included into the controller file so that functions can be used.

Wait for promises inside of a angular.forEach loop

I know this has been asked quite a few times already but after a day of search I still don't get it to work, although it's just like what is shown as a solution everywhere...
I have a async request to a database which returns an array of data. For each object in this array I need to start another async request to the database and as soon as ALL of these async requests resolve, I want to return them. I read you could do it with $q.all(...)
So here's the code:
Factory.firstAsyncRequest(id).then(function (arrayWithObjects) {
var promises = [];
var dataArr = [];
angular.forEach(arrayWithObjects, function (object, key) {
var deferred = $q.defer();
promises.push(deferred);
Factory.otherAsyncRequest(key).then(function (objectData) {
dataArr.push({
name: objectData.name,
key: key,
status: objectData.status
});
deferred.resolve();
console.info('Object ' + key + ' resolved');
});
});
$q.all(promises).then(function () {
$rootScope.data = dataArr;
console.info('All resolved');
});});
From the console I see that the $q.all is resolved BEFORE each object. Did I get something wrong? This seems to work for everyone...
Your help is highly appreciated, been looking the whole night, it's 5:30am now lol..
Cheers
EDIT:
So for anyone who's coming here later: It was just the promises.push(deferred.PROMISE) bit. Tho, I read that anguar.forEach is actually not a recommended method to loop through array because it was originally not constructed to be used by the end-user. Don't know if that's correct but I figured out another way if you don't want to use angular.forEach:
Users.getAll(uid).then(function (users) {
var uids = ObjHandler.getKeys(users); //own function just iterating through Object.keys and pushing them to the array
var cntr = 0;
function next() {
if (cntr < uids.length) {
Users.getProfile(uids[cntr]).then(function (profile) {
var Profile = {
name: profile.name,
key: uids[cntr],
status: profile.status
});
dataArr[uids[cntr]] = Profile;
if(cntr===uids.length-1) {
defer.resolve();
console.info('Service: query finished');
} else {cntr++;next}
});
}
}
next();
});
And the getKey function:
.factory('ObjHandler', [
function () {
return {
getKeys: function(obj) {
var r = [];
for (var k in obj) {
if (!obj.hasOwnProperty(k))
continue;
r.push(k)
}
return r
}
};
}])
Instead of
promises.push(deferred);
Try this:
promises.push(deferred.promise);

JavaScript Promises

Im trying to understand promises, but Im hitting a roadblock, I'm trying to query my Parse database for the last ran date object so that ill know when it was ran last. Then pass that date to the next function who can check my movie database for anything after the last time it was called. (I'm doing this to send out push notifications for new fields manually entered into Parse class) then actually send the push. But I'm not understanding the .then and promises, I'm new to JavaScript so any help would be appreciated!
Here is my code i have now.
Parse.Cloud.job("TestSendNewMoviePush", function(request, response) {
var query = new Parse.Query("MovieStatus");
var lastRunDateQuery = new Parse.Query("LastRun");
var lastRunDate;
var newDate;
var newCount = 0;
var installQuery = new Parse.Query(Parse.Installation);
query.greaterThan("updatedAt", lastRunDate);
query.equalTo("CurrentStatus", "Ready");
query.equalTo("imageStatusName", "Green");
installQuery.equalTo("role", "downloader");
lastRunDateQuery.get("d3WeNEwzIu", {
success: function(lastDateRanObj) {
console.log("Got the object " + lastDateRanObj);
var date = new lastDateRanObj.updatedAt;
lastRunDate = lastDateRanObj.updatedAt;
console.log(lastRunDate);
return lastRunDate;
},
error: function(lastDateRanObj, error) {
console.log("Failed to get object");
}
}).then(
query.count({
success: function(count) {
newCount = count;
return newCount
},
error: function(e) {
}
})).then(
Parse.Push.send({
where: installQuery,
data: {
"alert": newCount + " new movie(s) available!",
"badge": "Increment"
}
}, {
success: function() {
response.success("Success");
},
error: function(e) {
response.error("Error:" + e.code);
}
}));
});
lastRunDateQuery.get() returns a Promise object, which you can chain with a then, which itself is a function taking 2 functions as arguments: one that is called if the promise is resolved, and one that is called if the promise is rejected. You use these instead of the success and error parameters:
lastRunDateQuery.get()
.then(function(data) {
// success!!
}, function(error) {
// error :(
});
The functions you passed as arguments to then can themselves return promises, which you may subsequently chain with a then. In the example below I have omitted the error callbacks:
lastRunDateQuery.get()
.then(function(data) {
// data is the result of lastRunDateQuery.get()
return query.count();
})
.then(function(data) {
// data is the result of query.count()
return someOtherThing.someOtherMethodReturningAPromise();
});
.then(function(data) {
// data is the result of someOtherThing.someOtherMethodReturningAPromise()
});
And so on.
I would recommend having a look at the Promises/A+ spec - it's very instructive.
EDIT:
If the chaining concept is a bit confusing just think of it as a shorthand for the following:
var aPromise = lastRunDateQuery.get();
aPromise.then(
function() {}, // promise was resolved -> call this function
function() {}, // promise was rejected -> call this function
);

Multiple Promise Chains in Single Function

I have some code that will dynamically generate an AJAX request based off a scenario that I'm retrieving via an AJAX request to a server.
The idea is that:
A server provides a "Scenario" for me to generate an AJAX Request.
I generate an AJAX Request based off the Scenario.
I then repeat this process, over and over in a Loop.
I'm doing this with promises here: http://jsfiddle.net/3Lddzp9j/11/
However, I'm trying to edit the code above so I can handle an array of scenarios from the initial AJAX request.
IE:
{
"base": {
"frequency": "5000"
},
"endpoints": [
{
"method": "GET",
"type": "JSON",
"endPoint": "https://api.github.com/users/alvarengarichard",
"queryParams": {
"objectives": "objective1, objective2, objective3"
}
},
{
"method": "GET",
"type": "JSON",
"endPoint": "https://api.github.com/users/dkang",
"queryParams": {
"objectives": "objective1, objective2, objective3"
}
}
]
This seems like it would be straight forward, but the issue seems to be in the "waitForTimeout" function.
I'm unable to figure out how to run multiple promise chains. I have an array of promises in the "deferred" variable, but the chain only continues on the first one--despite being in a for loop.
Could anyone provide insight as to why this is? You can see where this is occuring here: http://jsfiddle.net/3Lddzp9j/10/
The main problems are that :
waitForTimeout isn't passing on all the instructions
even if waitForTimeout was fixed, then callApi isn't written to perform multiple ajax calls.
There's a number of other issues with the code.
you really need some data checking (and associated error handling) to ensure that expected components exist in the data.
mapToInstruction is an unnecessary step - you can map straight from data to ajax options - no need for an intermediate data transform.
waitForTimeout can be greatly simplified to a single promise, resolved by a single timeout.
synchronous functions in a promise chain don't need to return a promise - they can return a result or undefined.
Sticking with jQuery all through, you should end up with something like this :
var App = (function ($) {
// Gets the scenario from the API
// sugar for $.ajax with GET as method - NOTE: this returns a promise
var getScenario = function () {
console.log('Getting scenario ...');
return $.get('http://demo3858327.mockable.io/scenario2');
};
var checkData = function (data) {
if(!data.endpoints || !data.endpoints.length) {
return $.Deferred().reject('no endpoints').promise();
}
data.base = data.base || {};
data.base.frequency = data.base.frequency || 1000;//default value
};
var waitForTimeout = function(data) {
return $.Deferred(function(dfrd) {
setTimeout(function() {
dfrd.resolve(data.endpoints);
}, data.base.frequency);
}).promise();
};
var callApi = function(endpoints) {
console.log('Calling API with given instructions ...');
return $.when.apply(null, endpoints.map(ep) {
return $.ajax({
type: ep.method,
dataType: ep.type,
url: ep.endpoint
}).then(null, function(jqXHR, textStatus, errorThrown) {
return textStatus;
});
}).then(function() {
//convert arguments to an array of results
return $.map(arguments, function(arg) {
return arg[0];
});
});
};
var handleResults = function(results) {
// results is an array of data values/objects returned by the ajax calls.
console.log("Handling data ...");
...
};
// The 'run' method
var run = function() {
getScenario()
.then(checkData)
.then(waitForTimeout)
.then(callApi)
.then(handleResults)
.then(null, function(reason) {
console.error(reason);
})
.then(run);
};
return {
run : run
}
})(jQuery);
App.run();
This will stop on error but could be easily adapted to continue.
I'll try to answer your question using KrisKowal's q since I'm not very proficient with the promises generated by jQuery.
First of all I'm not sure whether you want to solve the array of promises in series or in parallel, in the solution proposed I resolved all of them in parallel :), to solve them in series I'd use Q's reduce
function getScenario() { ... }
function ajaxRequest(instruction) { ... }
function createPromisifiedInstruction(instruction) {
// delay with frequency, not sure why you want to do this :(
return Q.delay(instruction.frequency)
.then(function () {
return this.ajaxRequest(instruction);
});
}
function run() {
getScenario()
.then(function (data) {
var promises = [];
var instruction;
var i;
for (i = 0; i < data.endpoints.length; i += 1) {
instruction = {
method: data.endpoints[i].method,
type: data.endpoints[i].type,
endpoint: data.endpoints[i].endPoint,
frequency: data.base.frequency
};
promises.push(createPromisifiedInstruction(instruction));
}
// alternative Q.allSettled if all the promises don't need to
// be fulfilled (some of them might be rejected)
return Q.all(promises);
})
.then(function (instructionsResults) {
// instructions results is an array with the result of each
// promisified instruction
})
.then(run)
.done();
}
run();
Ok let me explain the solution above:
first of all assume that getScenario gets you the initial json you start with (actually returns a promise which is resolved with the json)
create the structure of each instruction
promisify each instruction, so that each one is actually a promise whose
resolution value will be the promise returned by ajaxRequest
ajaxRequest returns a promise whose resolution value is the result of the request, which also means that createPromisifiedInstruction resolution value will be the resolution value of ajaxRequest
Return a single promise with Q.all, what it actually does is fulfill itself when all the promises it was built with are resolved :), if one of them fails and you actually need to resolve the promise anyways use Q.allSettled
Do whatever you want with the resolution value of all the previous promises, note that instructionResults is an array holding the resolution value of each promise in the order they were declared
Reference: KrisKowal's Q
Try utilizing deferred.notify within setTimeout and Number(settings.frequency) * (1 + key) as setTimeout duration; msg at deferred.notify logged to console at deferred.progress callback , third function argument within .then following timeout
var App = (function ($) {
var getScenario = function () {
console.log("Getting scenario ...");
return $.get("http://demo3858327.mockable.io/scenario2");
};
var mapToInstruction = function (data) {
var res = $.map(data.endpoints, function(settings, key) {
return {
method:settings.method,
type:settings.type,
endpoint:settings.endPoint,
frequency:data.base.frequency
}
});
console.log("Instructions recieved:", res);
return res
};
var waitForTimeout = function(instruction) {
var res = $.when.apply(instruction,
$.map(instruction, function(settings, key) {
return new $.Deferred(function(dfd) {
setTimeout(function() {
dfd.notify("Waiting for "
+ settings.frequency
+ " ms")
.resolve(settings);
}, Number(settings.frequency) * (1 + key));
}).promise()
})
)
.then(function() {
return this
}, function(err) {
console.log("error", err)
}
, function(msg) {
console.log("\r\n" + msg + "\r\nat " + $.now() + "\r\n")
});
return res
};
var callApi = function(instruction) {
console.log("Calling API with given instructions ..."
, instruction);
var res = $.when.apply(instruction,
$.map(instruction, function(request, key) {
return request.then(function(settings) {
return $.ajax({
type: settings.method,
dataType: settings.type,
url: settings.endpoint
});
})
})
)
.then(function(data) {
return $.map(arguments, function(response, key) {
return response[0]
})
})
return res
};
var handleResults = function(data) {
console.log("Handling data ..."
, JSON.stringify(data, null, 4));
return data
};
var run = function() {
getScenario()
.then(mapToInstruction)
.then(waitForTimeout)
.then(callApi)
.then(handleResults)
.then(run);
};
return {
// This will expose only the run method
// but will keep all other functions private
run : run
}
})($);
// ... And start the app
App.run();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
jsfiddle http://jsfiddle.net/3Lddzp9j/13/
You have a return statement in the loop in your waitForTimeout function. This means that the function is going to return after the first iteration of the loop, and that is where you are going wrong.
You're also using the deferred antipattern and are using promises in places where you don't need them. You don't need to return a promise from a then handler unless there's something to await.
The key is that you need to map each of your instructions to a promise. Array#map is perfect for this. And please use a proper promise library, not jQuery promises (edit but if you absolutely must use jQuery promises...):
var App = (function ($) {
// Gets the scenario from the API
// NOTE: this returns a promise
var getScenario = function () {
console.log('Getting scenario ...');
return $.get('http://demo3858327.mockable.io/scenario');
};
// mapToInstructions is basically unnecessary. each instruction does
// not need its own timeout if they're all the same value, and you're not
// reshaping the original values in any significant way
// This wraps the setTimeout into a promise, again
// so we can chain it
var waitForTimeout = function(data) {
var d = $.Deferred();
setTimeout(function () {
d.resolve(data.endpoints);
}, data.base.frequency);
return d.promise();
};
var callApi = function(instruction) {
return $.ajax({
type: instruction.method,
dataType: instruction.type,
url: instruction.endPoint
});
};
// Final step: call the API from the
// provided instructions
var callApis = function(instructions) {
console.log(instructions);
console.log('Calling API with given instructions ...');
return $.when.apply($, instructions.map(callApi));
};
var handleResults = function() {
var data = Array.prototype.slice(arguments);
console.log("Handling data ...");
};
// The 'run' method
var run = function() {
getScenario()
.then(waitForTimeout)
.then(callApis)
.then(handleResults)
.then(run);
};
return {
run : run
}
})($);
App.run();

Categories

Resources