Answer a question

I am using Flask to do this. I essentially want to display my pandas dataframe on my webpage but my webpage ends up displaying this on my html page:

website < phone t email a b l e b o r d e r = " 1 " c l a s s = " d a t a f r a m e " > < t h e a d > < t r s t y l e = " t e x t - a l i g n : r i g h t ; " > < t h > < / t h > < t h > c o m p a n y < / t h > < t h > w e b s i t e < / t h > < t h > p h o n e < / t h > < t h > e m a i l < / t h > < / t r > < / t h e a d > < t b o d y > < / t b o d y > < / t a b l e >

Here is what I tried with Flask:

from backend import final_dataframe

@app.route('/results', methods=["GET", "POST"])
def results():
   return render_template('results.html',  tables=final_dataframe.to_html(), titles=final_dataframe.columns.values)

And here's a snippet of my html file, for which I used Jinja to display the table:

 <div  style="width: 50%;margin-left: 25%;margin-top: 58px;">
    {% for table in tables %}
        {{titles[loop.index]}}
        {{ table|safe }}
     {% endfor %}
 </div>

UPDATE:

This is what happens when I do print(final_dataframe.to_html()) in flask:

<table border="1" class="dataframe">
  <thead>
    <tr style="text-align: right;">
      <th></th>
      <th>company</th>
      <th>website</th>
      <th>phone</th>
      <th>email</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

OK so its a problem with my backend.py file. It seems that the global variable does not update:

final_dataframe = pd.DataFrame(columns= ['company', 'website', 'phone', 'email'])

def someFunction(a,b):
  contact_info = pd.DataFrame(myData, columns= ['company', 'website', 'phone', 'email'])
  global final_dataframe
  final_dataframe = final_dataframe.append(contact_info, ignore_index = True)

So basically, when the program gets out of the function, the global variable (final_dataframe) is not updated. It's updated inside the function however.

Answers

Probably because you have a loop in your template, so the html being separated by each character returned by .to_html(), try without the for loop

<div style="width: 50%;margin-left: 25%;margin-top: 58px;">
    {{ tables|safe }}
 </div>