As a high school math teacher, I am venturing into the world of programming to enhance my skills. Please bear with me if some of my terminology is not quite accurate.
Currently, I am facing an issue with transferring CSV data collected from users to a SQLite database using Python.
Everything seems to be functioning smoothly except when a value contains a space.
For instance, part of my JavaScript object looks like this:
Firstname: "Bruce"
Grade: ""
Lastname: "Wayne Jr"
Nickname: ""
After employing JSON.stringify, it becomes:
{"Firstname":"Bruce","Lastname":"Wayne Jr","Nickname":"","Grade":""}This JSON data is then sent to Python via a form using the following code:
data = request.form.get("data")
print(data)
data2 = json.loads(data)
print(data2)
However, I am encountering multiple error messages, culminating in:
json.decoder.JSONDecodeError: Unterminated string starting at: line 1 column 250 (char 249)[{"Firstname":"Jason","Lastname":"Bourne","Nickname":"","Grade":"10"},
{"Firstname":"Steve","Lastname":"McGarret","Nickname":"5-0","Grade":""},
{"Firstname":"Danny","Lastname":"Williams","Nickname":"Dano","Grade":"12"},
{"Firstname":"Bruce","Lastname":"Wayne
The issue appears to arise from the space in "Wayne Jr".
I utilized the information found here as the foundation for my efforts:
https://bl.ocks.org/HarryStevens/0ce529b9b5e4ea17f8db25324423818f
I suspect that the JavaScript function below is responsible for processing user input:
function changeDataFromField(cb){
var arr = [];
$('#enter-data-field').val().replace( /\n/g, "^^^xyz" ).split( "^^^xyz" ).forEach(function(d){
arr.push(d.replace( /\t/g, "^^^xyz" ).split( "^^^xyz" ))
});
cb(csvToJson(arr));
}
Based on feedback, I should clarify that I am utilizing a POST request and not AJAX.
Users have two options for input: a text box for pasting CSV data and a file upload feature. Below is more of the accompanying JavaScript:
// Implement HTML5 File API for CSV parsing
function changeDataFromUpload(evt, cb){
if (!browserSupportFileUpload()) {
console.error("The File APIs are not fully supported in this browser!");
} else {
var data = null;
var file = evt.target.files[0];
var fileName = file.name;
$("#filename").html(fileName);
if (file !== "") {
var reader = new FileReader();
reader.onload = function(event) {
var csvData = event.target.result;
var parsed = Papa.parse(csvData);
cb(csvToJson(parsed.data));
};
reader.onerror = function() {
console.error("Unable to read " + file.fileName);
};
}
reader.readAsText(file);
$("#update-data-from-file")[0].value = "";
}
}
// Check for browser support of HTML5 File API
function browserSupportFileUpload() {
var isCompatible = false;
if (window.File && window.FileReader && window.FileList && window.Blob) {
isCompatible = true;
}
return isCompatible;
}
// Convert CSV data to JSON format
function csvToJson(data) {
var cols = ["Firstname","Lastname","Nickname","Grade"];
var out = [];
for (var i = 0; i < data.length; i++){
var obj = {};
var row = data[i];
cols.forEach(function(col, index){
if (row[index]) {
obj[col] = row[index];
}
else {
obj[col] = "";
}
});
out.push(obj);
}
return out;
}
// Generate table for user review and upload button
function makeTable(data) {
console.log(data);
send_data = JSON.stringify(data);
console.log(send_data);
var table_data = '<table style="table-layout: fixed; width: 100%" class="table table-striped">';
table_data += '<th>First name</th><th>Last name</th><th>Nickname</th><th>Grade</th>'
for(var count = 0; count < data.length; count++) {
table_data += '<tr>';
table_data += '<td>'+data[count]['Firstname']+'</td>';
table_data += '<td>'+data[count]['Lastname']+'</td>';
table_data += '<td>'+data[count]['Nickname']+'</td>';
table_data += '<td>'+data[count]['Grade']+'</td>';
table_data += '</tr>';
}
table_data += '</table>';
table_data += '<p><form action="/uploaded" method="post">';
table_data += 'Does the data look OK? If so, click to upload. ';
table_data += '<button class="btn btn-primary" type="submit">Upload</button><p>';
table_data += '<input type="hidden" id="data" name="data" value='+send_data+'>';
table_data += '<input type="hidden" name="class_id" value="{{ class_id }}">';
table_data += '</form>';
table_data += 'Otherwise, fix the file and reload.';
document.getElementById("result_table").innerHTML = table_data;
}
</script>