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);

Node.js Function returning undefined? [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 2 years ago.
Trying to find a value in an excel file using the XLSX library:
The function works, it finds the value, however the output is undefined, even though the debugging say the value is found.
Here's the function:
var getValsFromExcel = function(sheet,idcol, valcol, val){
var workbook = new Excel.Workbook();
workbook.xlsx.readFile(__dirname + '/assets/gu.xlsx')
.then(function() {
var worksheet = workbook.getWorksheet(sheet);
worksheet.eachRow({ includeEmpty: false }, function(row, rowNumber) {
console.log("Row " + rowNumber + " = " + JSON.stringify(row.values));
console.log(row.values[idcol]);
console.log('checking ' + row.values[idcol] + ' = ' + val + ' ' + (row.values[idcol] == val))
if (row.values[idcol] == val){
console.log('Value found! its ' + row.values[valcol])
//getValsFromExcel = row.values[valcol];
return row.values[valcol];
}
});
});
}
var ans = getValsFromExcel('yesno',3, 4, tobj["respondent_consent"]);
console.log('Q1 answer = ' + ans);
Here's the console output:
Q1 answer = undefined
Row 1 = [null,"UID","Delete(Y/N)","field: yesno_key_value","field: yesno_display_text"]
field: yesno_key_value
checking field: yesno_key_value = yes false
Row 2 = [null,"5b45fe42f7fe481d8442d5e94b894b45","N","yes","Si"]
yes
checking yes = yes true
Value found! its Si
Row 3 = [null,"b65ba5a1a3814a87b4571e8d477307aa","N","no","No"]
no
checking no = yes false

getValsFromExcel asynchronous, here is the correction:
var getValsFromExcel = function(sheet,idcol, valcol, val){
var workbook = new Excel.Workbook();
return workbook.xlsx.readFile(__dirname + '/assets/gu.xlsx')
.then(function() {
var worksheet = workbook.getWorksheet(sheet);
let answer = null;
worksheet.eachRow({ includeEmpty: false }, function(row, rowNumber) {
console.log("Row " + rowNumber + " = " + JSON.stringify(row.values));
console.log(row.values[idcol]);
console.log('checking ' + row.values[idcol] + ' = ' + val + ' ' + (row.values[idcol] == val))
if (row.values[idcol] == val){
console.log('Value found! its ' + row.values[valcol])
//getValsFromExcel = row.values[valcol];
answ = row.values[valcol];
return;
}
});
return answer;
});
}
getValsFromExcel('yesno',3, 4, tobj["respondent_consent"])
.then( answer => console.log('Q1 answer = ' + ans) );

There are a couple things going on here. First, you're not returning any value from getValsFromExcel, so doing var ans = getValsFromExcel() will always be undefined (the default return value of any function).
But even if you do return workbook.xlsx.readFile(__dirname + '/assets/gu.xlsx').then() // ... you won't get the value you have in console.log('Value found! its ' + row.values[valcol]), because workbook.xlsx.readFile returns a Promise.
If you're on a recent version of Node, you can add that return before your readFile call, and then do this
async function main() {
var ans = await getValsFromExcel()
console.log(ans)
}
main()
Edit: sorry for the half answer initially. I don't like the SO editor and apparently I smashed a key combo that prematurely saved it.
Here's another solution showing this without async/await. Remember: async/await is just Promises with special syntax, but it works the same.
getValsFromExcel(/* args */)
.then((value) => {
console.log(value)
})
This is the same thing. We either have to await the Promise, or we have to chain a then with a callback that will be invoked with the value you return in your Promise chain in the getValsFromExcel function.
There were a number of bugs in the original code... here's a further breakdown for completeness' sake:
const Excel = require("exceljs")
var getValsFromExcel = function (sheet, idcol, valcol, val) {
var workbook = new Excel.Workbook()
return workbook.xlsx
.readFile(__dirname + "/assets/gu.xlsx")
.then(function () {
var worksheet = workbook.getWorksheet(sheet)
// let's initialize with some value.
// undefined would work as well, but we can be explicit if it's not found
// and make it null.
let result = null
worksheet.eachRow({ includeEmpty: false }, function (row, rowNumber) {
if (row.values[idcol] == val) {
// ok now we reassign result to the value we want
result = row.values[valcol]
}
})
// In order to have access to the value in the next `then`
// of your Promise chain, you _must_ return it.
return result
})
.then((value) => {
console.log("Value = " + value)
})
}
// alternate version using async/await
var getValsFromExcel = async function (sheet, idcol, valcol, val) {
var workbook = new Excel.Workbook()
// wait for the asynchronous code to resolve
await workbook.xlsx.readFile(__dirname + "/assets/gu.xlsx")
// after this point, workbook has been mutated and now contains the file's data
var worksheet = workbook.getWorksheet(sheet)
let result = null
worksheet.eachRow({ includeEmpty: false }, function (row, rowNumber) {
if (row.values[idcol] == val) {
result = row.values[valcol]
}
})
console.log("Value = " + result)
}
getValsFromExcel("Sheet1", 2, 2, "Dulce")

JavaScript Callback Inner Function not Executed

I have a client-side web-application that takes a csv-file, parses it into various data types, searches for something specific, and displays a table with the answer on the screen. The search function returning a null string. This occurs because its search parameter, returned by a callback function and put into lib, returns null.
I'm fairly certain this is a callback issue, but I've messed around with the order so much I'm not sure what goes where anymore in my html...A second set of eyes would be appreciated.
The desired series of events
fileToArray() gives us an array
search() looks in the array for its specified item and returns a csv-format string containing what it found
displayTable takes that csv-format string and outputs it to the desired location
The Code
// jQuery call to fetch the client-side csv file - this works when called by itself.
const fileToArray = () => {
console.log("fileToArray started.");
$.get({
url: CSV_LOCATION,
dataType: "text",
success: function (result) {
console.log("splitting result by newline...");
let csvLines = result.split("\n");
console.log("split successful. generating array into retval ...");
let retval = [];
for (let i = 0; i < csvLines.length; i++) {
// [0][0] is number [0][1] is class, [0][2] is unit, [0][3] is lesson
retval[i] = csvLines[i].split(",");
}
console.log("success! Returning retval.");
return retval;
// callback(result);
// return result;
},
failure: function (xhr, status, error) {
console.log("ERROR: fileToString(): " + xhr + " ||| " + status + " ||| " + error);
alert("ERROR: fileToString(): " + xhr + " ||| " + status + " ||| " + error);
}
})
};
// PRECONDITION: form is #search-params in index.js
// > lib is the result of fileToArray()
// POSTCONDITION: result is a csv-format string to be passed to displayTable() in index.js
const search = (form, callback) => {
console.log("search called...");
// vvvvv The probable root of the problem vvvvv //
let lib = callback;
console.log(lib.length + " is lib's length.");
let result = "";
console.log("search nested for loop called...");
for (let i = 0; i < lib.length; i++) {
// check class
console.log("checking class " + form.class.value + "...");
if (lib[i][1] === form.class.value) {
// check unit
console.log("checking unit " + form.unit.value + "...");
if (Number(lib[i][2]) === Number(form.unit.value)) {
console.log("adding to result...");
result += lib[i] + "\n";
}
}
}
console.log("search success! result: " + result.length + " characters");
console.log(result);
return result;
};
<!-- I'm almost 100% certain I've messed up the callback in this button,
but I still don't quite understand how... I've played with
displayTable(fileToArray(search(...))), but I don't quite know how it should go -->
<button class="btn btn-primary"
onclick="displayTable(search(document.getElementById('search-params'), fileToArray), $('#card-display'))">
Submit
</button>
What I've tried
I have looked to the following sites for inspiration (none have helped):
JavaScript is Sexy
JavaScript: Passing parameters to a callback function
JavaScript Callback Functions
Passing arguments to callback functions
In Summary
It's painfully obvious I still don't understand callbacks fully. Any help would be appreciated.

You could use async / await
const displayTable = async () => {
let arrayFromFile = await fileToArray(); // fileToArray executes and assigns the returned value when it completes
let searchedData = search(form, arrayFromFile);
// Display the table
};

Thanks to #kapantzak for the inspiration!! Turns out, I was using callbacks horribly bass-ackwards. According to this, the old-school async style is something akin to
doSomething(function(result) {
doSomethingElse(result, function(newResult) {
doThirdThing(newResult, function(finalResult) {
console.log('Got the final result: ' + finalResult);
}, failureCallback);
}, failureCallback);
}, failureCallback);
So, the relevant code now looks like this:
const fileToArray = (callback) => {
// console.log("fileToArray started.");
$.get({
url: CSV_LOCATION,
dataType: "text",
success: function (result) {
let csvLines = result.split("\n");
let retVal = [];
for (let i = 0; i < csvLines.length; i++) {
// [0][0] is number [0][1] is class, [0][2] is unit, [0][3] is lesson
retVal[i] = csvLines[i].split(",");
}
callback(retVal);
},
failure: function (xhr, status, error) {
console.log("ERROR: fileToString(): " + xhr + " ||| " + status + " ||| " + error);
alert("ERROR: fileToString(): " + xhr + " ||| " + status + " ||| " + error);
}
})
};
// =======
const search = (form, lib, callback) => {
let result = "";
let formClass = form.class.value.toLowerCase();
let formUnit = form.unit.value.toLowerCase();
let formLesson = form.lesson.value.toLowerCase();
for (let i = 0; i < lib.length; i++) {
// check class
if (lib[i][1].toLowerCase() === formClass) {
// check unit
if (Number(lib[i][2].toLowerCase()) === Number(formUnit)) {
result += lib[i] + "\n";
}
}
}
console.log(result);
callback(result);
};
<button class="btn btn-primary"
onclick="fileToArray(function(result) {
search(document.getElementById('search-params'), result, function(newResult) {
displayTable(newResult, $('#card-display'));
});
});">
Submit
</button>
This righted the wrongs and caused my search and display to function properly.

How do I define operators on an RX subject?

How do I define operators on an RX subject? I want to be able to throttle/take/debounce a data stream without changing the original source stream. ive tried the following (broken) implementation. any help appreciated.
var source = Rx.Observable.interval(1000).take(10);
var subject = new Rx.Subject();
source.subscribe(subject);
var subscriber1 = subject.subscribe(
function (x) { $("#result1").append('next: ' + x + '<br>'); },
function (e) { $("#result1").append('onError: ' + e.message); },
function () { $("#result1").append('onCompleted'); });
var modified = new Rx.Subject().take(2); // ... or throttle, or debounce etc
source.subscribe(modified);
var subscriber2 = modified.subscribe(
function (x) { $("#result2").append('next: ' + x + '<br>'); },
function (e) { $("#result2").append('onError: ' + e.message); },
function () { $("#result2").append('onCompleted'); });

You can review What are the semantics of different RxJS subjects? for some extra info on subjects.
Subjects are observables, so you can use the same operators which act on observables. Subjects are observers so you can subscribe them to sources.
What is wrong in your code is the following var modified = new Rx.Subject().take(2); source.subscribe(modified);
modified is not a subject anymore, it is only a regular observable, so you cannot subscribe it to source, you can only subscribe an observer to a source.
So do something like :
var newS = new Rx.Subject();
source.subscribe(newS);
var subscriber2 = newS.take(2).subscribe(
function (x) { $("#result2").append('next: ' + x + '<br>'); },
function (e) { $("#result2").append('onError: ' + e.message); },
function () { $("#result2").append('onCompleted'); });

How properly handle async functions in nodejs

I am new to nodejs, and I don't properly understand how async functions works. I read about them a lot today, but I cant solve my problem.
I use Sequelize.js as the ORM and my problem is when I nest a query into the callback of an other query then I cant force it to continues only when both query ended.
Here is my current code:
io.on('connection', function (socket) {
socket.on('join', function (data) {
clients[clients.length] = new Client("Client " + clients.length, data.channel);
console.log('Client connected Channel: ' + clients[clients.length-1].channel);
var array = []
DB.Matches.findAll({attributes: ['matchId', 'teamAId', 'teamBId']}).then(function (result) {
for (var i = result.length - 1; i >= 0; i--) {
DB.Teams.findAll({where: { team_id: [result[i].teamAId,result[i].teamBId]}}).then(function (teams) {
array.push({ id: 0, name: teams[0].clubName + ' - ' + teams[1].clubName});
}).then(function () {
// Now my emit event is here but I dont want to run every time the loop run
console.log(array);
socket.emit('matches', array);
});
}
}.then(function () {
// I tried to put it here, but then I got an empty array, because the queries haven't finshed yet
}));
});
});
When this code is called, the array will be emited in every loop with one more element in it in every loop, but this is not good for me. I want to call the emit event once when the array is totally filled.

The preferred way of solving this kind of thing is to use Promise.all
io.on('connection', function (socket) {
socket.on('join', function (data) {
clients[clients.length] = new Client("Client " + clients.length, data.channel);
console.log('Client connected Channel: ' + clients[clients.length-1].channel);
DB.Matches.findAll({attributes: ['matchId', 'teamAId', 'teamBId']}).then(function (result) {
var promises = [];
for (var i = result.length - 1; i >= 0; i--) {
promises.push(
DB.Teams.findAll({where: { team_id: [result[i].teamAId,result[i].teamBId]}}).then(function (teams) {
return { id: 0, name: teams[0].clubName + ' - ' + teams[1].clubName};
}));
}
Promise.all(promises).then(function(array) {
console.log(array);
socket.emit('matches', array);
});
});
});
});
edit:
If I understand you correctly you want to write
return { id: result[i].matchId, name: teams[0].clubName + ' - ' + teams[1].clubName};
But that doesn't work. That line of code is executed at some point in the future,
i.e. after the for loop has finished and by that time i is -1.
To make it work you need a new variable for each iteration of the loop.
You could do that e.g. by wrapping the code in another function like this
for(var i = result.length - 1; i >= 0; i--) {
(function(i) {
promises.push(
DB.Teams.findAll({where: { team_id: [result[i].teamAId,result[i].teamBId]}}).then(function (teams) {
return { id: result[i].matchId, name: teams[0].clubName + ' - ' + teams[1].clubName};
}));
})(i);
}
That way you use a different i variable (stored at a different place in memory) in each iteration.
But the best way to do it in this case is to use forEach. The only difference is that the loop will
iterate through the array forward and not backward as was the case with your for loop.
result.forEach(function(match) {
promises.push(
DB.Teams.findAll({where: { team_id: [match.teamAId,match.teamBId]}}).then(function (teams) {
return { id: match.matchId, name: teams[0].clubName + ' - ' + teams[1].clubName};
}));
});