Nested for loop with inner functions - javascript

In javascript For loop it's works fast and inner functions are not called. I am trying to store images in database using cordova. In my code for loop works fast and finished but I didn't get any base64 images.
for(var i = 0; i < pages.length; i++)
{
var cat_img = res.Catalogue[0].Catalogue_img;
var catalogue_image_id = cat_img[i].catalogue_image_id;
var catalogue_image = cat_img[i].catalogue_image;
getBase64FromImage(catalogue_image,function (baseData64) {
console.log("baseData64===="+baseData64);
insertPageData (catalogue_image, catalogue_image_id);
},function (error) {
console.log("error====="+error);
});
}
Thanks in advance!!

Your callback "function (baseData64)" will be executed only when the image is downloaded and converted to base64. At that point, the value of "calalogue_image" and "catalogue_image_id" will contain the value of the last element in the loop - with "i = pages.length"
That is, your for loop finishes probably before even the first image is downloaded.
Actually I think the valid behaviour is that you should see only the last image, with "i = pages.length" in the database.
Try this
var processImage = function (cImg,cImgId){
var catalogueImage = cImg;
var catalogueImageId = cImgId;
return function (baseData64) {
console.log("baseData64===="+baseData64);
insertPageData (catalogueImage, catalogueImageId);
}
}
for(var i = 0; i < pages.length; i++)
{
var cat_img = res.Catalogue[0].Catalogue_img;
var catalogue_image_id = cat_img[i].catalogue_image_id;
var catalogue_image = cat_img[i].catalogue_image;
getBase64FromImage(catalogue_image,
processImage(catalogue_image, catalogue_image_id) ,
function (error) {
console.log("error====="+error);
}
);
}

Related

How to define a firebase cloud function trigger inside a then-statement

I have this code that I need to make sure is run before my firebase function is defined, because it depends on a variable set in the code:
const hotelBedTimeouts = [];
var beds = db.ref('/beds');
// Initialise the bed timeout holder object
beds.once("value", function(snapshot){
var hotels = snapshot.val();
for (var i = 0; i < hotels.length; i++) {
// push empty list to be filled with lists holding individual bed timeouts
if(hotels[i]){
hotelBedTimeouts.push([]);
for(var j = 0; j < hotels[i].length; j++) {
// this list will hold all timeouts for this bed
hotelBedTimeouts[i].push({});
}
} else {
hotelBedTimeouts.push(undefined);
}
}
});
I was suggested to put this function inside of a .then() statement after the once() call. So I tried this:
const hotelBedTimeouts = [];
var beds = db.ref('/beds');
// Initialise the bed timeout holder object
beds.once("value", function(snapshot){
var hotels = snapshot.val();
for (var i = 0; i < hotels.length; i++) {
// push empty list to be filled with lists holding individual bed timeouts
if(hotels[i]){
hotelBedTimeouts.push([]);
for(var j = 0; j < hotels[i].length; j++) {
// this list will hold all timeouts for this bed
hotelBedTimeouts[i].push({});
}
} else {
hotelBedTimeouts.push(undefined);
}
}
}).then( () => {
// Frees a bed after a set amount of time
exports.scheduleFreeBed = functions.database.ref('/beds/{hotelIndex}/{bedIndex}/email').onUpdate( (snapshot, context) => {
// My code
});
Unfortunately, this cause my whole firebase function to be deleted:
$ firebase deploy --only functions
=== Deploying to 'company-23uzc'...
i functions: deleting function scheduleFreeBed...
✔ functions[scheduleFreeBed]: Successful delete operation.
Is it possible to define a firebase function in this way?
What is the way to ensure that a firebase function always has access to certain variables defined in the backend code?
EDIT:
This is my first attempt at a solution after Doug Stevenson's answer:
const hotelBedTimeouts = [];
var beds = db.ref('/beds');
const promise = beds.once("value");
// Frees a bed after a set amount of time
exports.scheduleFreeBed = functions.database.ref('/beds/{hotelIndex}/{bedIndex}/email').onUpdate( (snapshot, context) => {
promise.then( (snapshot) => {
var hotels = snapshot.val();
for (var i = 0; i < hotels.length; i++) {
// push empty list to be filled with lists holding individual bed timeouts
if(hotels[i]){
hotelBedTimeouts.push([]);
for(var j = 0; j < hotels[i].length; j++) {
// this list will hold all timeouts for this bed
hotelBedTimeouts[i].push({});
}
} else {
hotelBedTimeouts.push(undefined);
}
}
});
var originalEmail = snapshot.after.val();
var hotelIndex = context.params.hotelIndex;
var bedIndex = context.params.bedIndex;
if (originalEmail === -1) {
clearTimeout(hotelBedTimeouts[hotelIndex][bedIndex].timeoutFunc); // clear current timeoutfunc
return 0; // Do nothing
}
// replace old timeout function
hotelBedTimeouts[hotelIndex][bedIndex].timeoutFunc = setTimeout(function () { // ERROR HERE
var bedRef = admin.database().ref(`/beds/${hotelIndex}/${bedIndex}`);
bedRef.once("value", function(bedSnap){
var bed = bedSnap.val();
var booked = bed.booked;
if (!booked) {
var currentEmail = bed.email;
// Check if current bed/email is the same as originalEmail
if (currentEmail === originalEmail) {
bedSnap.child("email").ref.set(-1, function() {
console.log("Freed bed");
});
}
}
});
}, 300000); // 5 min timeout
return 0;
});
Still, it seems like the hotelBedTimeouts has not been properly defined at the time of function execution, look at this error:
TypeError: Cannot read property '15' of undefined
I've marked in a comment in my code which line this error is for.
How can the list still not be defined?
This type of function definition isn't supported by the Firebase CLI. Instead, you should kick off the initial work inside the function, and cache the result later so you don't have to execute it again. Or, you can try to kick off the work, and retain a promise that the function can use later, like this:
const promise = doSomeInitialWork() // returns a promise that resolves with the data
exports.scheduleFreeBed = functions.database.ref(...).onUpdate(change => {
promise.then(results => {
// work with the results of doSomeInitialWork() here
})
})

Using response from one API call to do another API Call

I'm using AngularJS to build a site where one of the functions is to present Billboard(it's a music chart) listings for a specified date.
I want to present the songs in order, together with an image of the song.
First I'm calling this API:
http://billboard.modulo.site/
where I give a date and get a response of the top 10 songs for that date and data about each song.
The response from the Billboard API also includes a spotify id and I want to use that ID and call the Spotify Web API to get an image of that song, to complement the information I present about each song.
This is how it looks like in my controller:
var spotifyID = [];
$scope.spotifyImg = [];
musicService.getBillboard($scope.date).then(function(data){ //Response is top 10 songs for given date
$scope.status = "";
$scope.songlist = data;
for (var i = 0; i < data.length; i++) {
spotifyID[i] = data[i].spotify_id; //data[i].spotify_id returns the ID of the track, as given by the billboard API
}
$scope.getImages();
});
$scope.getImages = function() {
for (var i = 0; i < spotifyID.length; i++) {
if(spotifyID[i] !== null) {
musicService.getSpotify(spotifyID[i]).then(function(data){
$scope.spotifyImg[i] = data.album.images[0].url; //returns the appropriate image from the Spotify Web API
});
}
}
console.log($scope.spotifyImg);
}
And in my view it would look something like this:
<div ng-repeat = "song in songlist">
<div>{{ song.rank }}</div>
<div>
<img ng-src=" {{ spotifyImg[$index] }}"/>
</div>
</div>
However, it does not work.
When I'm checking the $scope.spotifyImg array in the console, it is of length 11 and only has one element in index 10 and that is the image of the last song(that is the 10th song).
I'm a bit confused as to why the $scope.spotifyImg array only contains one element in index 10. Also why is the array of length 11 when the spotifyID is of length 10?
Any ideas of how I could solve this?
The problem is that getSpotify is run asynchronous, when the responses to these calls come in, i is probably set to spotifyID.length - 1 which means that all callback functions set the $scope.spotifyImg[spotifyID.length - 1] element.
Try this:
$scope.spotifyImg = [];
musicService.getBillboard($scope.date).then(function(data){
$scope.status = "";
$scope.songlist = data;
for (var i = 0; i < data.length; i++) {
$scope.getImage(data[i].spotify_id, i);
}
});
$scope.getImage = function(id, index) {
musicService.getSpotify(id).then(function(data){
$scope.spotifyImg[index] = data.album.images[0].url;
});
}
create separate function and put the content of for loop inside that function and call that function inside the loop
$scope.getImages = function() {
for (var i = 0; i < spotifyID.length; i++) {
if (spotifyID[i] !== null) {
sampleFunc(i);
}
}
}
function sampleFunc(i) {
musicService.getSpotify(spotifyID[i]).then(function(data) {
$scope.spotifyImg[i] = data.album.images[0].url; //returns the appropriate image from the Spotify Web API
});
}
I think reason you get only last index of an array is when you are calling promise inside loop, loop does't wait until the promise returns. it just keep executing.At the time promise returns loop is executed and it;s getting last index of the array. That's why you need to separately call the promise from for loop
You can use IIFE
(function(i){
musicService.getSpotify(spotifyID[i]).then(function (data) {
$scope.spotifyImg[i] = data.album.images[0].url;
});
})(i)
So,your getImages function should be like this.
$scope.getImages = function () {
for (var i = 0; i < spotifyID.length; i++) {
if (spotifyID[i] !== null) {
(function(i){
musicService.getSpotify(spotifyID[i]).then(function (data) {
$scope.spotifyImg[i] = data.album.images[0].url;
});
})(i)
}
}
}
Try using this code
Js code
var spotifyID = [];
$scope.spotifyImg = [];
musicService.getBillboard($scope.date).then(function(data) { //Response is top 10 songs for given date
$scope.status = "";
$scope.songlist = data;
for (var i = 0; i < data.length; i++) {
spotifyID[i] = data[i].spotify_id; //data[i].spotify_id returns the ID of the track, as given by the billboard API
}
$scope.getImages(0);
});
$scope.getImages = function(index) {
if (index == spotifyID.length) {
return;
}
musicService.getSpotify(spotifyID[index]).then(function(data) {
$scope.spotifyImg[index] = data.album.images[0].url; //returns the appropriate image from the Spotify Web API
// call recursive here
$scope.getImages(index++);
});
}
}
call your getimages function recursively so that will add you images in array.

Retrieving a variable from within a function

I am attempting to pull information from the League of Legends API.
To simplify what I am doing, I am attempting to pull information about a user and their previous matches. The problem that I run into is that when I parse a JSON request, it returns a champion ID rather than their name (Ex: 412 rather than "Thresh").
The only solution I can see for this would be to make another JSON request and parse that data for the champion name. Currently what I have looks like this.
$.getJSON(championMasteryPHP, function (json) {
for (var i = 0; i < 20; i++) {
var champID = json[i].championId;
var championInfo = "http://example.com/champInfo.php?summonerid=" + champID;
$.getJSON(championInfo, function (json2) {
var champName = json2.name;
});
$('#champ').append("<li>"+champID+" - "+champName+"</li>")
}
});
I'm unable to access the champName variable due to it being nested within the second JSON function.
Is there a better way to do this?
$.getJSON(championMasteryPHP, function (json) {
for (var i = 0; i < 20; i++) {
var champID = json[i].championId;
var championInfo = "http://example.com/champInfo.php?summonerid=" + champID;
$.getJSON(championInfo, function (json2) {
var champName = json2.name;
$('#champ').append("<li>"+champID+" - "+champName+"</li>")
});
}
});
Just put it inside the second json request since you need to wait till that request is done anyway.
You should put the append statement in the callback because getJSON is an asynchronous method (does mean the Request is running in the background, and calls your function back when it got a response), so you should wait for the response first then you can append it to #champ :
$.getJSON(championMasteryPHP, function (json) {
for (var i = 0; i < 20; i++) {
var champID = json[i].championId;
var championInfo = "http://example.com/champInfo.php?summonerid=" + champID;
$.getJSON(championInfo, function (json2) {
var champName = json.name;
$('#champ').append("<li>"+champID+" - "+champName+"</li>")
});
}
});
Hope this helps.

Async loading files with Angular into an object array and keeping their order

I'm not loading scripts, I'm reading XML files into an array of objects.
My first [dumb] attempt was something like:
for (var i = 1; i < n; i++) {
var filePath = "xml/chapter_"+i+".xml";
$http.get( filePath ).success(function (data) {
$scope.chaptersData.push (data._chapter);
});
}
I quickly figured out this was no good, because the array will be filled in the order the files finished loading, not when they started (a race condition) and the smaller ones will finish first. I can't use the value of 'i' because of course it gets to 'n' long before any of the loading finishes.
After that I thought success(function (data, i) { would work, but it didn't. I'm out of simple ideas, and before I come up with some kind of Rube Goldberg kludge I thought I would ask the wisdom of the Internets if there is a 'right' way to do this.
You can pass i into a function which performs the request.
for (var i = 1; i < n; i++) {
getFile(i);
}
function getFile(index){
var filePath = "xml/chapter_" + index + ".xml";
$http.get( filePath ).success(function (data) {
$scope.chaptersData[index] = data._chapter;
});
}
Within the getFile function, the value of the parameter index will not change as i changes in the outer function. So it will still be at its initial value when the success function executes and can be used for populating the array.
Just get data as an object like
{
order: [] // just your chapter id or whatever identifier value in desired order
data: // whatever you're getting now
}
In your .success (which is btw depreciated and you should use .then() instead) just do
orderedChapters = [];
for (var i = 0; i < order.length; i++) {
for (var j = 0; j < data.length; i++) {
if (order[i] == data[j].id) {
orderedChapters.push(data[j]);
}
}
}

Node.js function output to variable

i have a grep function that i am using to seperate some data out.
I ran into an issue, instead of outputting the data to the console, i need it to store it to a variable.
for example, here is my actual function.
function funGrep(cmd,callback,search,args){
exec(cmd,function(err,stdout){
if(!stdout)
return;
var lines = stdout.toString().split(EOL);
var re = new RegExp(search,args);
for(var line in lines){
var results = lines[line].match(re);
if(results){
for(var i = 0; i < results.length; i++){
callback(results[i]);
}
}
}
});
}
and here is my actual calling of the function into play.
funGrep("ping -n 3 google.com",console.log,"time=[0-9\.]+ ?ms");
instead of logging the output to the console, how can i just assign it to a variable like output.
thank you!
All you should have to do is create your own callback function that does whatever you need it to do with your data/results. It would look something like this:
function theCallback (data) {
... do whatever you want with your data ...
}
And then instead of console.log, you would pass in this function as an argument.
funGrep("ping -n 3 google.com",theCallback,"time=[0-9\.]+ ?ms");
You could you the callback to append the data to a variable, and modify the callback to notify the handler when the function has finished:
function funGrep(cmd,callback,search,args){
exec(cmd,function(err,stdout){
if(err){
console.log(err);
return;
}
if(!stdout)
return;
var lines = stdout.toString().split(EOL);
var re = new RegExp(search,args);
for(var line in lines){
var results = lines[line].match(re);
if(results){
for(var i = 0; i < results.length; i++){
callback(results[i],false);
}
}
}
callback(null,true); //finsished
});
}
var myData = [];
funGrep("ping -n 3 google.com",function(result,finished){if(!finished) myData.push(result); else goOn();},"time=[0-9\.]+ ms");
function goOn(){
//funGrep finished
console.log("Result: " + myData);
}

Categories