Hola, estoy leyendo columnas del archivo csv para mi proyecto pyhton. Imprimo las columnas que leo en index.html. Quiero agregar los nombres de columna que seleccioné al otro div con el botón "agregar predictor" y eliminarlos con el "botón expulsar predictor". Me puedes ayudar.

Aquí está la pantalla donde estoy trabajando y mis códigos.

Ver captura de pantalla

Mi función Js:

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

}

mi formulario index.html y el campo donde imprimo las columnas:

 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>

Y finalmente mi 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}