Read a CSV file in Flask and display values from the CSV file in an HTML table-CodePudding

I am trying to display data on my web app from a CSV file using Flask. In my code below, I am trying to select 5 columns from my CSV file and display the values of these columns in an HTML table. Unfortunately, the values that appear in the HTML table are {{ value [0] }}, {, {{ value [1] }}, { value [2] }}, {{ value [3] }}, {{ value [4] }}, {{ value [5] }}.

My python function:

@app.route("/homepage")
def table_issues():
columns=["Regulatory_Domain","Detection_Date","ID_Client","Issue_ID_Name","Status_Issue","Comments"]
df = pd.read_csv("data.csv", names=columns, header= 0)
df = df.sort_values(by=['Detection_Date'], ascending = True)
issueslist = list (df.values)
return render_template("homepage.html", issueslist=issueslist)

My HTML code:

        <table>
        <thead class=theadissues> 
            <tr>
                <th>Regulatory Domain</th>
                <th>Detection Date</th>
                <th>Client-ID</th>
                <th>Issue ID / Name</th>
                <th>Review Status</th>
                <th>Comments</th>
                <th>Edit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ value[0] }}</td>
                <td>{{ value[1] }}</td>
                <td>{{ value[2] }}</td>
                <td>{{ value[3] }}</td>
                <td>{{ value[4] }}</td>
                <td>{{ value[5] }}</td>
                <td>
                    <p class="EditAction"><a href="/updateform">EDIT ISSUE</a></p>
            </tr>
        </tbody>
    </table>

Could you please help me to correct my code above.

Many thanks in advance for your help.

CodePudding user response：

You need to run a loop in HTML using Jinja.

    <tbody>
        {% for value in issueslist %}
        <tr>
            <td>{{ value[0] }}</td>
            <td>{{ value[1] }}</td>
            <td>{{ value[2] }}</td>
            <td>{{ value[3] }}</td>
            <td>{{ value[4] }}</td>
            <td>{{ value[5] }}</td>
            <td>
                <p class="EditAction"><a href="/updateform">EDIT ISSUE</a></p>
        </tr>
        {% endfor %}
    </tbody>

CodePudding user response：

I installed Jinja2 in Visual Studio Code and I changed my code as below:

HTML Code:

            <tbody>
            {% for value in issueslist %}
            <tr>
                <td>{{ "Regulatory_Domain" }}</td>
                <td>{{ "Detection_Date" }}</td>
                <td>{{ "ID_Client" }}</td>
                <td>{{ "Issue_ID_Name" }}</td>
                <td>{{ "Status_Issue" }}</td>
                <td>{{ "Comments" }}</td>
                <td>
                    <p class="EditAction"><a href="/updateform">EDIT ISSUE</a></p>
                </td>
            </tr>
            {% endfor %}
        </tbody>

Python code:

import jinja2

@app.route("/homepage")

def table_issues():
columns = ["Regulatory_Domain", 
"Detection_Date","ID_Client","Issue_ID_Name","Status_Issue","Comments"]
df = pd.read_csv("data.csv", names=columns, header= 0)
df = df.sort_values(by=['Detection_Date'], ascending = True)
issueslist = list (df.values)
return render_template("homepage.html", issueslist=issueslist)

Unfortunately, it's stil does not work. Shall I add something in the Python Code ?

Thanks for your help.