0

so I've gotten a file to be uploaded to the site and then read so that information is displayed, however using pd.to_html results in the text displaying on the site being put as a string or quote instead of actual HTML code. It turns the "<" into the character code "&lt" and adds a " at the beginning and end of data. I know I could export this information as a JSON but it would be quite a bit simpler to just somehow convert this into actual HTML code. I'm not sure how to accomplish this and really expected using pandas to convert to a DataFrame and then to_html would work. Thanks so much for your help.

Views.py

from flask import render_template, request, redirect
from app import app
import os
import csv
import pandas as pd
import json

@app.route('/', methods=["GET", "POST"])
def index():
    data = []
    if request.method == 'POST':
        if request.files:
            uploaded_file = request.files['filename']
            filepath = os.path.join(app.config['FILE_UPLOADS'], uploaded_file.filename)
            uploaded_file.save(filepath)
            with open(filepath) as file:
                csv_file = csv.reader(file)
                for row in csv_file:
                    data.append(row)
            data = pd.DataFrame(data).to_html()
            return render_template('index.html', data=data)
    return render_template('index.html', data=data)


@app.route('/help')
def help():
    return render_template('help.html')

app.config['FILE_UPLOADS'] = "C:\\Users\\Zachary\\Documents\\VSCode_Projects\\monday_webapp\\app\\static\\file\\uploads"

index.html

{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block body %}

<div class="jumbotron">
    <h1 style='text-align: center'>Zach's Web Application</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"></script>
    <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
    <script>
        var tbl= $("#div_table").find('table');
        $(document).ready(function(){
            $(tbl).DataTable();
            console.log(`{{data}}`)
        } );
    </script>
</div>
<div>
    <p class="lead">Upload a csv file to view its data.</p>
    <form method="POST" enctype="multipart/form-data" action="/">
        <input type="file" id="myFile" name="filename" accept=".csv">
        <input type="submit">
    </form>
</div>
<div id="div_table">
    {{ data }}
</div>
<div>

{% endblock %}
3
  • 1
    Does this help? stackoverflow.com/a/52644615/2956135 Commented Jan 28, 2021 at 20:41
  • 1
    Maybe data = pd.DataFrame(data).to_html(escape=False) Commented Jan 28, 2021 at 20:45
  • I believe that worked and did exactly what I need thank you so much! Now I just gotta get it converted to a DataTable with JS, Do you happen to know if it's possible to assign the table a id, I know it can be given a class but I need an ID for DataTables or some way to make it find that table, I have it in a div at the moment but it can't find the table Commented Jan 28, 2021 at 20:56

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.