Having trouble POSTing the array songFiles generated by the getTableData() function (inside an ajax request) to the /api/fileNames endpoint, and then handling it in the postFileNames() callback function. Any assistance or alternative approaches would be greatly appreciated.
As a newcomer to ajax and flask, I've searched extensively for a solution but haven't found one that fits my specific needs. I apologize for my lack of expertise in this area.
JavaScript Code
function getTableData() {
$.ajax({
method: "GET",
url: "/api/getSong",
dataType: "json",
success: function(data) {
createMusicTable();
let indexObj = Object.keys(data.song).length;
for (var i = 0; i < indexObj; i++) {
var song = data.song[i]
var id = data.song[i].song_id;
var fileName = data.song[i].song_file + ".mp3";
songFiles.push(fileName);
appendMusic(song, id);
songTitle.id = "s" + i;
console.log("td-ok");
}
postFileNames(songFiles);
}
});
}
function postFileNames(data) {
$.ajax({
method: "POST",
url: "/api/fileNames",
dataType: "json", // Unsure about this due to data being an array
data: data, // Not certain if this is correct
success: function(data) {
console.log(data) // Expected behavior: post data to the endpoint. Data is not logged and goes directly to error.
},
error: function() {
console.log("cry") // Logs an error message
}
})
}
FLASK Endpoint Code
@app.route("/api/fileNames", methods=['POST', 'GET'])
def fileNameStorage():
if request.method == 'POST':
data = request.get_data() // Unsure about what to do here
return data
else:
return "error" // Currently returns 'error'