We Keep Coding

Javascript and json pharse loop with external file

I should loop this json file to javascript, all the entries are important and must be retrieved.
I need to make this json compatible with this javascript code.
This is my json file:
{ "user_token":"6664e310e87f75ad4fd5674a976f8310", "lesson_language":"it_de", "language_app":"it", "main_levels":[ { "level":"1_it_de" }, { "level":"5_it_de" } ] }
This is my code javascript:
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
var user_token = arr[0].user_token;
for(i = 0; i < arr.length; i++) {
var level = arr[i].level;
out += user_token;
}
document.getElementById("id01").innerHTML = out;
}

var jsonInput={ "user_token":"6664e310e87f75ad4fd5674a976f8310", "lesson_language":"it_de", "language_app":"it", "main_levels":[ { "level":"1_it_de" }, { "level":"5_it_de" } ] }
function myFunction(arr) {
var out = "";
var i;
var userLabel=''
var user_token = arr.user_token;
mainArrObj=arr.main_levels
for(i = 0; i < mainArrObj.length; i++) {
var level = mainArrObj[i].level;
out += user_token + ' ';
userLabel += level + ' ';
}
console.log('user_token :'+out);
console.log('userLabel :'+userLabel);
}
myFunction(jsonInput)

Download multiple files with XmlHttpRequests

I'm trying to download multiple files with XmlHttpRequest, but can't deal with async method. How can I get my result in same sequence as urls array.
urls = ['url1', 'url2', 'url3']
getting result:
['url2', 'url1', 'url3']
function downloadFiles(urls, callback) {
var buffer = []
var ind = 0
for (var u in urls) {
var xhr = new XMLHttpRequest()
xhr.open('GET', urls[u], true)
xhr.responseType = 'arraybuffer'
xhr.onload = function (e) {
if (this.status == 200 || this.status == 304) {
var uInt8Array = new Uint8Array(this.response)
var i = uInt8Array.length
var binaryString = new Array(i)
while (i--)
binaryString[i] = String.fromCharCode(uInt8Array[i])
var data = binaryString.join('')
var base64 = window.btoa(data)
var fileName = urls[ind].substr(urls[ind].indexOf('.jpg')-20, 24)
//var downloadedFile = createTempFolder() + fileName;
//writeFile(downloadedFile, base64)
buffer[ind] = downloadedFile
if (ind === urls.length - 1) {
return callback(buffer)
}
ind++
}
};
xhr.send()
}
}

Javascript - FileReader how can I read and process each file at a time among multiple files

I am trying let the user drop multiple excel file and extract desired values from each one of the files and upload it to website ONE FILE AT A TIME.
My code is not working, and I am assuming this is because of the callback problem..
Could anybody help?
Edit: I also added my uploadFile function. I very much appreciate your help.
for(var i = 0; i < fileList.length; i++) {
//console.log(fileList[i]["file"]);
var reader = new FileReader();
var f = fileList[i]["file"];
//var fName = fileList[i]["fileName"];
var excelObject = fileList[i];
reader.onload = function(ev) {
var data = ev.target.result;
if(!rABS) data = new Uint8Array(data);
var wb = XLSX.read(data, {type: rABS ? 'binary' : 'array'});
var einAddress = "B3";
var engCodeAddress = "B1";
var goAddress = "B2";
var errMsg = tabName + " tab or required value is missing";
// Worksheet with the necessary info
try{
var ws = wb.Sheets[tabName];
var ein_cell = ws[einAddress];
ein = (ein_cell ? ein_cell.v.toString() : undefined);
var eng_cell = ws[engCodeAddress];
engCode = (eng_cell ? eng_cell.v.toString() : undefined);
var go_cell = ws[goAddress];
goLocator = (go_cell ? go_cell.v.toString() : undefined);
if(ein == undefined || engCode == undefined || goLocator == undefined){
hasValues = false;
}
excelObject["EngagementCode"] = engCode;
excelObject["GoSystem"] = goLocator;
excelObject["EIN"] = ein;
if(hasValues && isValid){
uploadFile(fileList[i], userInfo);
} else {
noValueErrorHandler(errMsg);
}
} catch(err){
hasValues = false;
}
};
if(rABS) reader.readAsBinaryString(f); else reader.readAsArrayBuffer(f);
}
function uploadFile(f, userInfo) {
// Define the folder path for this example.
var serverRelativeUrlToFolder = listName;
// Get info of the file to be uploaded
var file = f;
var fileInput = file["file"];
var newName = file["fileName"];
var ein = file["EIN"];
var engCode = file["EngagementCode"];
var email = userInfo;
var goLocator = file["GoSystem"];
console.log("file: " + file);
// Get the server URL.
var serverUrl = _spPageContextInfo.siteAbsoluteUrl + "/StatusTracker";
// Initiate method calls using jQuery promises.
// Get the local file as an array buffer.
var getFile = getFileBuffer(fileInput);
getFile.done(function (arrayBuffer) {
// Add the file to the SharePoint folder.
var addFile = addFileToFolder(arrayBuffer, newName);
addFile.done(function (file, status, xhr) {
// Get the list item that corresponds to the uploaded file.
var getItem = getListItem(file.d.ListItemAllFields.__deferred.uri);
getItem.done(function (listItem, status, xhr) {
// Change the display name and title of the list item.
var changeItem = updateListItem(listItem.d.__metadata);
changeItem.done(function (data, status, xhr) {
processedCount += 1;
if (processedCount < fileCount) {
uploadFile(fileList[processedCount], email);
} else if (processedCount == fileCount){
$("#dropbox").text("Done, drop your next file");
$("#ADMNGrid").data("kendoGrid").dataSource.read();
fileList = [];
alert("Total of " + processedCount + " items are processed!");
}
// Refresh kendo grid and change back the message and empty fileList
//$("#dropbox").text("Drag your Fund/Lower Tier workpaper here ...");
//location.reload(true);
});
changeItem.fail(onError);
});
getItem.fail(onError);
});
addFile.fail(onError);
});
getFile.fail(onError);

You might put the whole thing into an async function and await a Promise for each iteration, forcing the files to be processed in serial. You didn't post your uploadFile, but if you have it return a Promise that resolves once it's done, you could do the following:
async fn() {
for (var i = 0; i < fileList.length; i++) {
await new Promise((resolve, reject) => {
//console.log(fileList[i]["file"]);
var reader = new FileReader();
var f = fileList[i]["file"];
//var fName = fileList[i]["fileName"];
var excelObject = fileList[i];
reader.onload = function(ev) {
var data = ev.target.result;
if (!rABS) data = new Uint8Array(data);
var wb = XLSX.read(data, {
type: rABS ? 'binary' : 'array'
});
var einAddress = "B3";
var engCodeAddress = "B1";
var goAddress = "B2";
var errMsg = tabName + " tab or required value is missing";
// Worksheet with the necessary info
try {
var ws = wb.Sheets[tabName];
var ein_cell = ws[einAddress];
ein = (ein_cell ? ein_cell.v.toString() : undefined);
var eng_cell = ws[engCodeAddress];
engCode = (eng_cell ? eng_cell.v.toString() : undefined);
var go_cell = ws[goAddress];
goLocator = (go_cell ? go_cell.v.toString() : undefined);
if (ein == undefined || engCode == undefined || goLocator == undefined) {
hasValues = false;
}
excelObject["EngagementCode"] = engCode;
excelObject["GoSystem"] = goLocator;
excelObject["EIN"] = ein;
if (hasValues && isValid) {
uploadFile(fileList[i], userInfo)
.then(resolve);
} else {
noValueErrorHandler(errMsg);
reject();
}
} catch (err) {
hasValues = false;
reject();
}
};
if (rABS) reader.readAsBinaryString(f);
else reader.readAsArrayBuffer(f);
});
}
}

javascript .send() not working on mobile

this javascript is working on desktop but not on mobile browsers. Is there an edit which could resolve this?
The script send the results to a questionnaire to a google document to pull out the results. It works ok on a desktop browser but no luck on mobiles.
<script>
var myForm = document.getElementById("questionnaire");
if (myForm) {
myForm.onsubmit = function(evt) {
evt.preventDefault();
var questionDiv = document.getElementById('question-div');
var busyDiv = document.getElementById('busy');
var resultDiv = document.getElementById('result-div');
var resultList = document.getElementById('result-list');
var xhr = new XMLHttpRequest();
var url = "https://script.google.com/macros/s/AKfycbzGx6a6eogfVTaKD_3a4kiLBZfcdD5GMoonNsSSY1-sCCJfPDI/exec";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var result = response.result;
for (var i in result) {
var e = result[i];
if (e) {
var li = document.createElement('li');
if (e.url) {
var a = document.createElement('a');
a.href = e.url;
a.textContent = e.name;
li.appendChild(a);
} else {
li.textContent = e.name;
}
resultList.appendChild(li);
}
}
busyDiv.hidden = true;
resultDiv.hidden = false;
}
}
var form = document.getElementById('questionnaire');
var formData = new FormData(form);
var fields = ['name','email','yob','gender','income','asset','q1','q2','q3','q4','q5','q6','q7','q8','q9','q10'];
var params = [];
for (var i in fields) {
var field = fields[i];
params.push(field + "=" + formData.get(field));
}
xhr.send(params.join('&'));
questionDiv.hidden=true;
busyDiv.hidden=false;
return false;
};
}
</script>

How send multiple files with javascript no jQuery i want for each file one progress bar?

I have this code, this it's my object:
var sendData = function(ob) {
var obj = ob;
return {
send: function() {
obj.myform.onsubmit = function(e) {
var file = obj.file.files;
var ajax = new XMLHttpRequest();
var formdata = new FormData();
for(var i = 0; i < file.length; i++) {
formdata.append(data[], file[i]);
}
ajax.upload.onprogress = function(event) {
oojs.byID('container').innerHTML = Math.round((event.loaded / event.total)*100)+"%";
}
ajax.onload = function() {
oojs.byID('container').innerHTML = "Done";
}
ajax.onerror = function() {
oojs.byID('container').innerHTML = "Error";
}
ajax.onabort = function() {
oojs.byID('container').innerHTML = "Abort";
}
ajax.open("POST", "result.php");
ajax.send(formdata);
e.preventDefault();
}
}
}
}
oojs.sendData = sendData;
I want for each file one progress bar but, now i have just one progrss bar,
for(var i = 0; i < file.length; i++) {
formdata.append(data[], file[i]);
}
In this loop each file is added to formdata, i want send formdata for each file especially. I'm allready try do like this:
for(var i = 0; i < file.length; i++) {
var formdata = new FormData();
formdata.append(data, file[i]);
// ...
ajax.send(formdata);
}

Could you please try something like this:
function sendFile (file, progressCallback) {
var ajax = new XMLHttpRequest();
var formdata = new FormData();
formdata.append(file.name, file);
ajax.upload.onprogress = function(event) {
progressCallback(Math.round((event.loaded / event.total)*100));
};
ajax.onload = function() {
oojs.byID('container').innerHTML = "Done";
};
ajax.onerror = function() {
oojs.byID('container').innerHTML = "Error";
};
ajax.onabort = function() {
oojs.byID('container').innerHTML = "Abort";
};
ajax.open("POST", "result.php");
ajax.send(formdata);
}
var progress = 0;
var filesLength = files.length;
for(var i = 0; i < filesLength; i++) {
sendFile(files[i], function (x) {
progress = progress + x;
oojs.byID('container').innerHTML = (Math.round((progress / filesLength))) + '%';
});
}