Hi I am reading columns of csv file for my pyhton project. I'm printing the columns I read in index.html. I want to add the column names I selected to the other div with the "add predictor" button and remove them with the "eject predictor button". Can you help me.
Here is the screen where I am working and my codes
My Js Function:
function clickFunc(e){
e.preventDefault();
const file = e.target.form[1].files[0];
const formData = new FormData();
formData.append('data', file);
fetch('http://127.0.0.1:5000/svm/read_data', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(result => {
var liData = "";
result.Columns.forEach((itemData,i) => {
liData += `<li id="${i}">` + itemData + `</li>`;
});
document.getElementById('read-file-ul').innerHTML = liData;
$(".read-file-ul li").on("click", function() {
$(this).toggleClass("selected");
if ($(this).hasClass("selected")) {
$(".list-show").append($(this).clone());
} else {
$(`.list-show li:contains('${$(this).text()}')`).remove();
}
});
})
.catch(error => {
console.error('Error:', error);
});
}
my index.html form and the field where I print the columns:
Train file path <input id="file-path-area" type="text">
<a class="btn fake-upload-button " id="fake-btn"onclick="document.getElementById('upload-file-btn').click();">Add File </a>
<input id="upload-file-btn" type="file" name="file" accept=".csv">
<button type="submit" id="svm-read-data" class="main-btn">Read Data</button>
And finally my app.py
def svm_read_data():
uploaded_df = request.files['data']
print(uploaded_df)
data_filename = secure_filename(uploaded_df.filename)
uploaded_df.save(os.path.join(app.config['UPLOAD_FOLDER'], data_filename))
filepath = os.path.join(app.config['UPLOAD_FOLDER'], data_filename)
csv_df = pd.read_csv(filepath)
print(csv_df)
columns=csv_df.columns.tolist()
return {"Columns" : columns}