We Keep Coding

Javascript fetch exception causes dead stop

I have the following code:
function makeid(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() *
charactersLength));
};
return result;
};
var instance = "{{ user }}" + makeid(16);
var checksum = "First Request Not recieved";
console.log(instance);
function downloadPlay(){
console.log("\ndownloadPlay - Begin\n")
try{
fetch("/file?instance=" + instance + "&checksum=" + checksum)
.then(function(resp) {
resp.headers.forEach(
function(val, key) {
// console.log("key, val: " + key + ", " + val);
if(key == "checksum"){
console.log("checksum: " + val);
checksum = val;
};
}
);
}
)
.then(file => {
var audio = new Audio("/file?instance=" + instance + "&checksum=" + checksum);
console.log("Done");
audio.addEventListener('ended', (event) => {
delete audio;
downloadPlay();
});
audio.play();
}
)
} catch (error) {
console.log("Something went wrong, Retrying: " + error);
}
console.log("downloadPlay - Complete\n")
};
downloadPlay();
This works perfectly when the promise succeeds. However when it fails(such as when the client device switches networks, i.e. wifi to data or just different access points on the same wifi network) it stops dead and never resumes no matter how many while loops, extra recursion points or try and catch statements I use. The best I could do so far is get it to play ever increasing numbers of the audio mostly in sync with each other and I just dont understand why. It seems I have a general lack of understanding of how this promise thing actually functions, but no matter how many tutorials I read/watch my lack of understanding seems to remain unchanged.
Heres the code that somewhat worked if that helps:
function makeid(length) {
var result = '';
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
var charactersLength = characters.length;
for ( var i = 0; i < length; i++ ) {
result += characters.charAt(Math.floor(Math.random() *
charactersLength));
};
return result;
};
var instance = "{{ user }}" + makeid(16);
var checksum = "First Request Not recieved";
console.log(instance);
function downloadPlay(){
console.log("\ndownloadPlay - Begin\n")
try{
console.log('fetching')
fetch("/file?instance=" + instance + "&checksum=" + checksum)
.then(function(resp) {
resp.headers.forEach(
function(val, key) {
// console.log("key, val: " + key + ", " + val);
if(key == "checksum"){
console.log("checksum: " + val);
checksum = val;
};
}
);
}
).catch(function(error) {
console.log('request failed', error)
console.log('retrying')
downloadPlay();
return;
})
.then(file => {
var audio = new Audio("/file?instance=" + instance + "&checksum=" + checksum);
console.log("Done");
audio.addEventListener('ended', (event) => {
delete audio;
downloadPlay();
});
audio.play();
}
)
} catch (error) {
console.log("Something went wrong, Retrying: " + error);
}
console.log("downloadPlay - Complete\n")
};
downloadPlay();
Any solution or very simple explanation on what im doing wrong would be much appreciated
Thanks in advance :)

You can do something like this
Just remove the comment and use your original fetching function
You can't use try catch with promises unless you use async await
const fakeChecking = Promise.resolve({headers: {checksum: 'aaaa'}})
const errorChecking = Promise.reject('error')
function downloadPlay(fetching) {
console.log("\ndownloadPlay - Begin\n")
console.log('fetching')
fetching
.then((resp) => resp.headers.checksum)
.then(checksum => {
/*var audio = new Audio("/file?instance=" + instance + "&checksum=" + checksum);
console.log("Done");
/*audio.addEventListener('ended', (event) => {
delete audio;
downloadPlay();
console.log("downloadPlay - Complete\n")
});
audio.play();*/
console.log("downloadPlay - Complete\n")
})
.catch(function(error) {
console.log('request failed', error)
console.log('retrying')
downloadPlay(fakeChecking);
})
};
downloadPlay(errorChecking);

Need JavaScript example for fetch() etc

I want to learn such new JavaScript features as fetch() and arrow functions. To this end, I selected a function from a recent app, and attempted to replace older features with new. Very little success. Here's my original function:
function popNames(arNumbers,ctrlName) {
var arSortedList = [];
var strNameList = "";
$.getJSON("NAME.json").done(function(zdata) {
$.each(arNumbers, function(i, ydata) {
$.each(zdata.NAME, function(k,v) {
if(v.idName == ydata) {// important: === did NOT work
if(ctrlName) arSortedList.push(v.last + ", " + v.first + ";" + v.idName);
else arSortedList.push(v.last + ", " + v.first);
}
}); // each element of NAME.json
}); // each idName value in the array passed
if(ctrlName) {
setOptions(arSortedList, ctrlName);
} else {
strNameList = arSortedList.join();
}
}); // getJSON NAME
}
I was successful using this line:
fetch("NAME.json").then(zdata => zdata.json())
but nothing I did after that worked. I'd appreciate seeing an example from which I can learn.

function popNames(arNumbers,ctrlName) {
let arSortedList = [];
let strNameList = "";
fetch("NAME.json").then(zdata => zdata.json())
.then(zdata => {
for(const ydata of arNumbers) {
for(const v of zdata.NAME) {
if(v.idName == ydata) { // important: === did NOT work
if(ctrlName) arSortedList.push(v.last + ", " + v.first + ";" + v.idName);
else arSortedList.push(v.last + ", " + v.first);
}
}
}
if(ctrlName) {
setOptions(arSortedList, ctrlName);
} else {
strNameList = arSortedList.join();
}
}); // getJSON NAME
}
I was researching why I couldn't next two Array.forEach statements, and discovered a new iterable construction (for...of).

Parse cloud function - code ot executed in sequence

I have below function to update rows if meeting some condition and at the end of for loop, response include how many rows updated.Despite more than zero rows updated, response shows zero. Looking at log, it seems reponse.success() fires before completing for loop.
why so?
Parse.Cloud.define("reset", function(request, response) {
var isSaveNeeded = false
var Query = new Parse.Query("price");
Query.equalTo('isActive', true);
Query.find({useMasterKey:true})
.then((results) => {
console.log("Found " + results.length + " price rows")
var currentDate = moment()
var noOfRowsUpdated = 0
for (let i = 0; i < results.length; ++i) {
var valid_till_date = results[i].get('valid_till_date');
if (valid_till_date == null) {
// if user had not selected valid_till_date then set to expire after system max no of days
var updatedAt = results[i].get('updatedAt');
if (currentDate.diff(updatedAt,'days') > 10) {
console.log("Permanent change row to be set inactive. Updated at - " + currentDate.diff(updatedAt)+ updatedAt)
results[i].set('isActive',false)
isSaveNeeded = true
}
} else if (currentDate.diff(valid_till_date) > 0) {
// check whether valid_till_date has passed
console.log("Found row with elapsed valid date " + results[i].id)
results[i].set("isActive",false)
isSaveNeeded = true
}
if (isSaveNeeded == true) {
console.log("Record needs to be saved for " + results[i].id)
results[i].save(null, {useMasterKey:true})
.then(function (user) {
++noOfRowsUpdated
console.log("reset : Object ID: " + results[i].id + " saved - " + noOfRowsUpdated)
})
.catch(function (error) {
console.log("reset : Error saving Object ID: " + results[i].id + error);
response.error(error);
})
} else {
console.log("Record not to be saved for " + results[i].id)
}
isSaveNeeded = false
} // end of for loop
//BELOW IS EXECUTED BEFORE FOR LOOP COMPLETES
console.log("Updated " + noOfRowsUpdated +" price rows");
response.success("Updated " + noOfRowsUpdated +" price rows")
}) // end of .then((results)
.catch(function(error) {
response.error("Failed to fetch from price" + error );
});
});

Parse.com's save runs async, so that loop finishes before the saves happen. The solution is to reorganize the code a little bit, and wait for the saves to happen before executing the response functions.
The trick is to collect the promises returned by each save in an array and wait for the fulfillment of those promises with Promise.when() (synonym for Promise.all())
To make it clearer, factor out the "is save needed" logic, so this cloud function can be only about handling the database...
Parse.Cloud.define("reset", function(request, response) {
var Query = new Parse.Query("price");
Query.equalTo('isActive', true);
Query.find({useMasterKey:true}).then((results) => {
console.log("Found " + results.length + " price rows");
// assuming ES6 or something like underscore
let pricesToSave = results.filter(price => priceNeedsSave(price));
// here's the important part, collect the promise from each save
// proceed only after the promises have completed
let promises = pricesToSave.map(price => price.save(null, {useMasterKey:true}));
return Parse.Promise.when(promises).then(() => pricesToSave.length);
}).then(count => {
response.success("Updated " + count +" price rows");
}).catch(error => {
response.error("Failed to fetch from price" + error );
});
}
Just for completeness, below is the factored-out needsSave logic. (OP should check this over, I just copied the body of the loop)...
function priceNeedsSave(price) {
var isSaveNeeded = false;
var currentDate = moment()
var valid_till_date = price.get('valid_till_date');
if (valid_till_date == null) {
// if user had not selected valid_till_date then set to expire after system max no of days
var updatedAt = price.get('updatedAt');
if (currentDate.diff(updatedAt,'days') > 10) {
console.log("Permanent change row to be set inactive. Updated at - " + currentDate.diff(updatedAt)+ updatedAt)
price.set('isActive',false)
isSaveNeeded = true
}
} else if (currentDate.diff(valid_till_date) > 0) {
// check whether valid_till_date has passed
console.log("Found row with elapsed valid date " + price.id)
price.set("isActive",false)
isSaveNeeded = true
}
return isSaveNeeded;
}

How to use Promise to return value from assync Angular function into calling method?

I have list which is filled in for cycle where I calling assync function by thos way:
In For cycle I'm calling
row.SUCCES_RATE_SINCE = $scope.computeSuccessRateSinceStart(row);
Called function
// Calculate percentage of a whole from since
$scope.computeSuccessRateSinceStart = function(row) {
db = window.sqlitePlugin.openDatabase({name:"callplanner"});
// GET APPT COUNT
db.transaction(function(tx) {
tx.executeSql(sqlQuery, [], function(tx,results){
// init empty array for results
for (var i=0; i < results.rows.length; i++){
row = results.rows.item(i);
//Udpate date for writeout
//row.DATE = moment(row.DATE).format('ddd DD.M');
console.log("row APPT count is " + JSON.stringify(row));
apptCnt = row.APPT_CNT;
convCnt = row.CONVERS_CNT;
dailySuccessRateSince = apptCnt / convCnt * 100;
console.log("Success rate since is " +dailySuccessRateSince);
// THIS IS NOT WORKING
return Math.round(dailySuccessRateSince);
}
});
},function (e) {
console.log("ERROR: " + e.message);
$ionicLoading.show({
template: $translate.instant('ERROR_DATABASE'),
duration:1000
});
});
};
Problem is that computed value is always returned null (return function is executed before value is available in scope).
I'm quite new in Angular but i found that this issue could be solved using promises. Could somebody give me the example how to return value properly?
Many thanks for any help.
EDIT:
Called method is now triggered, but i cannot pass returned value into variable like this:
var test = $scope.computeSuccessRateSinceStart(row).then(function(result){
//ALERT WITH VALUE WORKS FINE
alert("Result " + result);
return result;
});
// THIS GIVES ME EMPTY ARRAY {}
alert("Result " + JSON.stringify(test));

Why don't you just make your method such that it always returns a promise, and then extract the result from the promise?
$scope.computeSuccessRateSinceStart = function(row) {
var deferred = $q.defer();
db = window.sqlitePlugin.openDatabase({name:"callplanner"});
// GET APPT COUNT
db.transaction(function(tx) {
tx.executeSql(sqlQuery, [], function(tx,results){
// init empty array for results
for (var i=0; i < results.rows.length; i++){
row = results.rows.item(i);
//Udpate date for writeout
//row.DATE = moment(row.DATE).format('ddd DD.M');
console.log("row APPT count is " + JSON.stringify(row));
apptCnt = row.APPT_CNT;
convCnt = row.CONVERS_CNT;
dailySuccessRateSince = apptCnt / convCnt * 100;
console.log("Success rate since is " +dailySuccessRateSince);
// THIS IS NOW WORKING:
deferred.resolve(Math.round(dailySuccessRateSince));
}
});
}, function(e) {
console.log("ERROR: " + e.message);
deferred.reject(e);
});
return deferred.promise;
};
Usage:
$scope.computeSuccessRateSinceStart(row).then(function(result){
// THIS GIVES THE VALUE:
alert("Result " + JSON.stringify(test));
return result;
}, function(e)
$ionicLoading.show({
template: $translate.instant('ERROR_DATABASE'),
duration:1000
});
});

Synchronous Json calls from javascript

I'm working on a project where inside a loop I need to make multiple JSON calls. As soon as I exit that loop I need to work with the results of all the calls I made. I'm having a hard time understanding how to make these calls in such a way that my order of operation works out. My code to work with the results always executes before the calls to the service have completed. I created a jsfiddle to demonstrate and am including the code here.
http://jsfiddle.net/VEkrf/3/
var sourceData = { "fooIndex": "foo",
"barIndex": "bar"
}
var destinationData = {};
for (var sourceIndex in sourceData) {
$.getJSON('http://echo.jsontest.com/' + sourceIndex + '/' + sourceData[sourceIndex] + '?callback=?', null, function (result) {
for (var resultIndex in result) {
alert("Adding " + resultIndex + " : " + result[resultIndex]);
destinationData[resultIndex] = result[resultIndex];
}
});
}
if (Object.keys(destinationData).length == 0) {
alert("Destination not yet populated");
}
else {
alert("Eureka! You did it!");
}

This looks like a job for jQuery Deferred Object, and my sidekick $.when!
Pass all the $.getJSON calls to $.when, and when they are all done, I'll will call a function with all the results.
Check this out:
var sourceData = {
"fooIndex": "foo",
"barIndex": "bar"
};
var destinationData = {};
// Array of AJAX calls
var AJAX = [];
for (var sourceIndex in sourceData) {
AJAX.push($.getJSON('http://echo.jsontest.com/' + sourceIndex + '/' + sourceData[sourceIndex] + '?callback=?'));
}
// Apply is needed to pass each element as a parameter
$.when.apply($, AJAX).done(function(){
// This function will be called when all the AJAX calls are done
// The arguments of the functin are the responses from each request
for(var i = 0, len = AJAX.length; i < len; i++){
var result = arguments[i][0];
//arguments: [resultObj, 'success', jqXHR]
for (var resultIndex in result) {
alert("Adding " + resultIndex + " : " + result[resultIndex]);
destinationData[resultIndex] = result[resultIndex];
}
}
alert("Eureka! You did it!");
});
NOTE: Since this is asynchronous, destinationData won't be available until the callback is triggered. Put any code that uses that inside the .done() callback.

Since you are using jQuery already I suggest exploring the queue functions. You can queue the ajax calls and then in the success handlers call the de-queue or next function. this way they go in succession. The last item you add to the queue is your function that handles the returned data.
var sourceData = {
"fooIndex": "foo",
"barIndex": "bar"
};
var destinationData = {};
$(function () {
console.debug('ready');
for (var sourceIndex in sourceData) {
console.debug('for Loop');
$(document).queue('ajax', function (next) {
$.getJSON('http://echo.jsontest.com/' + sourceIndex + '/' + sourceData[sourceIndex] + '?callback=?', null, function (result) {
for (var resultIndex in result) {
alert("Adding " + resultIndex + " : " + result[resultIndex]);
destinationData[resultIndex] = result[resultIndex];
next();
}
});
});
}
$(document).queue('ajax', function (next) {
alert("Eureka! You did it!");
});
$(document).dequeue('ajax');
});
I do this all the time for 'synchronus' ajax.
here is an example of what i am talking about