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

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.

One function to recieve variables from many other functions

I 'm dealing an issue with some functions in javascript.
So i have this example
function(something) {
var example = 1;
var example2 = 2;
NameReturn(nameBusinessID, function(no) {
console.log(no);
//here is one callback value from another function
});
typeReturn(object, function(na) {
console.log(na);
//here is also a callback value from another function
});
view(example, example2);
}
function vliew(example, example2) {
console.log(example, example2);
//but here i want also to console.log the variables "no" and "na"
}
So this is my issue, is there any way to achieve what i want??
I have no idea how to make those two variables, "no" and "na" to pass them to the function "view"
Could anyone help? Thanks!

the dirty way
function(something) {
var example = 1;
var example2 = 2;
NameReturn(nameBusinessID, function(no) {
console.log(no);
//here is one callback value from another function
typeReturn(object, function(na) {
console.log(na);
//here is also a callback value from another function
view(example, example2,no, na);
});
});
}
function vliew(_example, _example2,_no,_na) {
console.log(_example)
console.log(_example2)
console.log(_no)
console.log(_na)
}
UPDATE
I have slightly modified your use case and implimented again.you can check code in this .
i am listening for button click callbacks and updating values in common object.once all four values are available,im calling the view function.
click both buttons and you will see result.
function collector() {
this.counter = 0;
this.obj = {};
this.setValues = function(name, value) {
this.counter++;
this.obj[name] = value;
if (this.counter == 4) {
view(this.obj.example, this.obj.example2, this.obj.no, this.obj.na);
}
};
}
function view(example, example1, a, b) {
$('.result').append('example :' + example + '<br>');
$('.result').append('example2 :' + example1 + '<br>');
$('.result').append('na :' + a + '<br>');
$('.result').append('no :' + b + '<br>');
}
function load() {
var example = 1;
var example2 = 2;
var valueCollector = new collector();
$('.no').on('click', function() {
var no = 3;
valueCollector.setValues('no', no);
});
$('.na').click(function() {
var na = 4;
valueCollector.setValues('na', na);
});
valueCollector.setValues('example', example);
valueCollector.setValues('example2', example2);
}
load();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="no">no</button>
<button class="na">na</button>
<div class="result"></div>

how can start and stop an interval observable in RXJS?

I have a very simple timeInterval observable and I want to start/stop transmission without disconnecting subscribers (which should sit and wait regardless of observable status). Is possible, and if so how?
var source = Rx.Observable
.interval(500)
.timeInterval()
.map(function (x) { return x.value + ':' + x.interval; })
.take(10);
var subscription = source.subscribe(
function (x) {
$("#result").append('Next: ' + x + ' ');
},
function (err) {
$("#result").append('Error: ' + err);
},
function () {
$("#result").append('Completed');
});
general comment: most of the examples ive seen show how to define observables and subscribers. how do i affect the behavior of existing objects?

Depends on what is the source of the stop/resume signal. The simplest way I can think about is with the pausable operator, which as the documentation says works better with hot observables. So in the following sample code, I removed the take(10) (your pausable signal now comes through the pauser subject), and added share to turn your observable into a hot one.
About hot vs. cold, have a look to the illustrated respective data flows.
On subjects, you can also review the corresponding semantics
var pauser = new Rx.Subject();
var source = Rx.Observable
.interval(500)
.timeInterval()
.map(function (x) { return x.value + ':' + x.interval; })
.share()
.pausable(pauser);
var subscription = source.subscribe(
function (x) {
$("#result").append('Next: ' + x + ' ');
},
function (err) {
$("#result").append('Error: ' + err);
},
function () {
$("#result").append('Completed');
});
// To begin the flow
pauser.onNext(true); // or source.resume();
// To pause the flow at any point
pauser.onNext(false); // or source.pause();
Here is a more sophisticated example which will pause your source every 10 items:
// Helper functions
function emits ( who, who_ ) {return function ( x ) {
who.innerHTML = [who.innerHTML, who_ + " emits " + JSON.stringify(x)].join("\n");
};}
var pauser = new Rx.Subject();
var source = Rx.Observable
.interval(500)
.timeInterval()
.map(function (x) { return x.value + ':' + x.interval; })
.share();
var pausableSource = source
.pausable(pauser);
source
.scan(function (acc, _){return acc+1}, 0)
.map(function(counter){return !!(parseInt(counter/10) % 2)})
.do(emits(ta_validation, 'scan'))
.subscribe(pauser);
var subscription = pausableSource.subscribe(
function (x) {
$("#ta_result").append('Next: ' + x + ' ');
},
function (err) {
$("#ta_result").append('Error: ' + err);
},
function () {
$("#ta_result").append('Completed');
});
You should have by now your answer to the second question. Combine the observables you are given with the relevant RxJS operators to realize your use case. This is what I did here.

not the most elegant, but probably the simplest:
timeSubscription: Subscription
timer: Observable<number>;
time = 0;
toggle() {
if (!this.timer)
this.timer = interval(500);
if (!this.timeSubscription || this.timeSubscription.closed)
this.timeSubscription = this.timer.subscribe(tick => { // running
console.log(this.time++);
});
else
this.timeSubscription.unsubscribe(); // not running
}

How can I convert this to be an extension of the Array Prototype?

http://jsfiddle.net/ryanneufeld/Y8ZNU/
With this example I have created a queue modeled after how I assume google is handling analytics events. The thing is I'd like to convert it to be an extension of the array prototype.
What I'm trying to accomplish is that when you create a new instance of Queue and pass in a queue array, the new instance would act as an array with the extra functions I've added.

might not be perfect but it get the job done: (see the link provided by #Pointy in the comments for a good explanation as to what the pitfalls are)
function pseudoArray(name) {
if (!(this instanceof pseudoArray)) {
return new pseudoArray(name);
}
var self = this;
self.name = name || 'defaultName';
var _push = self.push;
self.push = function(args) {
console.log('"' + name + '" pushing [ ' + Array.prototype.slice.apply(arguments) + ' ]');
_push.apply(self, arguments);
};
return self;
}
pseudoArray.prototype = [];
var x = new pseudoArray('fake array');
x.push('yay', 77, function() { alert('yup'); });
x.push('things');
x.push(12);
console.log(x instanceof Array);
console.log('to string: ' + x);
console.log('length: ' + x.length);
console.log('pop result: ' + x.pop());
console.log('length: ' + x.length);

function log() {
/* workaround for chrome not playing nice and letting me .apply to console */
console.log.apply(console, arguments);
}
var q = q || [[log, 'first item q1']],
q2 = q2 || [[log, 'first time q2']];
// You'll want a console open for this.
function Queue(_q, name) {
var _q = _q || [],
name = name || 'mlQueue';
function processQueue() {
task = _q.shift();
while (task) {
func = task.shift();
func.apply(window, task);
task = _q.shift();
}
}
function init() {
_q._push = _q.push;
processQueue();
_q.push = function() {
//first push it to the array
_q._push.apply(_q, arguments);
processQueue();
};
}
function push() {
console.log(name + ' pushing values');
_q.push.apply(_q, arguments);
};
return {
init: init,
push: push,
run: processQueue,
name: name
}
};
var q = new Queue(q, 'q1');
q.push([log, 'q1 and more']);
q.init();
q.push([log, 'q1 and more']);
var q2 = new Queue(q2, 'q2');
q2.init();
q2.push([log, 'q2 and more']);​