如何构建数据以便在Flask中轻松构建HTML表格 [英] How to structure data to easily build HTML tables in Flask

问题描述

我试图从存储在表中的数据创建HTML表格。我的数据是从表中读取，并转换成一个列表字典，例如：

pre $ x = {'date'：[u '2012-06-28'，u'2012-06-29'，u'2012-06-30']，'users'：[405，368，119]}


我的目标是为任意列表长度创建一个具有以下结构的HTML表：

 <表> 
< thead> 
< th>日期< / th> 
< th>用户< / th> 
< / thead> 
 
< tbody> 
< tr> 
< td> 2012-06-28< / td> 
< td> 405< / td> 
< / tr> 
< tr> 
< td> 2012-06-29< / td> 
< td> 368< / td> 
< / tr> 
< tr> 
< td> 2012-06-30< / td> 
< td> 119< / td> 
< / tr> 
< / tbody> 
< / table> 
  

我试过在Flask模板中做这两个不正确的方法：

 < tbody> 
 {％为x中的行％} 
< tr> 
< td> {{x.date | tojson | safe}}< / td> 
< td> {{x.users}}< / td> 
< / tr> 
 {％endfor％} 
< / tbody> 
  

将整个列表打印到每列中。

  {x日期中的日期％} 
< tr>< td> ; {{date | tojson | safe}}< / td>< / tr> 
 {％endfor％} 
 
 {％用户在x.users％} 
< tr>< td> {{users}}< / td>< ; / TR> 
 {％endfor％} 
  

只需将所有内容打印到第一列中。

这些实验和其他许多死胡同让我相信没有简单的方法来构建表，因为我想给出我当前的数据结构。

考虑到这一点，我有两个问题：

1）如何使用当前数据结构构建表？

2）什么是标准或理想的方式来为这个用例构造数据？

在此先感谢。

解决方案就像你说的，你可以改变你的数据结构，或者改变你的模板代码。这里是保持当前结构的一种方法：

$ p $ {$ for row_index in range（x ['date'] | count） ％}
< tr>
< td> {{x ['date'] [row_index] | tojson | safe}}< / td>
< td> {{x ['users'] [row_index]}}< / td>
< / tr>
{％endfor％}

---

你可以在python中重构你的数据：

  x = zip（x ['date']，x ['users']） 
  

然后使用这个模板：

  {％用于x％中的行} 
< tr> 
< td> {{row [0] | tojson | safe}}< / td> 
< td> {{row [1]}}< / td> 
< / tr> 
 {％endfor％} 
  

---

您也可以构造数据，以便模板不依赖于单元格的顺序：

  from itertools import izip 
x = [dict（date = d，user = u）for d，u in izip（x ['date']，x ['users']）] 
   
 $ b 
然后你可以像这样访问你的数据：
 $ b $ $ $ $ $ $ $ $ $ $排在x％} 
< tr> 
< td> {{行['date'] | tojson | safe}}< / td> 
< td> {{row ['user']}}< / td> 
< / tr> 
 {％endfor％} 
  

I am trying to create HTML tables from data stored in a table. My data is read from a table and converted into a dict of lists, e.g.:

x = {'date':[u'2012-06-28', u'2012-06-29', u'2012-06-30'], 'users': [405, 368, 119]}

My goal is to create an HTML table with the following structure for an arbitrary list length:

<table>
  <thead>
    <th>Date</th>
    <th>Users</th>
  </thead>

  <tbody>      
    <tr>
      <td>2012-06-28</td>
      <td>405</td>
    </tr>
    <tr>
      <td>2012-06-29</td>
      <td>368</td>
    </tr>
    <tr>
      <td>2012-06-30</td>
      <td>119</td>
    </tr>
  </tbody>
</table> 

I have tried doing this two incorrect ways in my Flask template:

<tbody>
  {% for line in x %}
    <tr>
      <td>{{ x.date|tojson|safe }}</td>
      <td>{{ x.users }}</td>
     </tr>
   {% endfor %}
</tbody>

Which prints the entire list into each column.

And:

{% for date in x.date %}
  <tr><td>{{ date|tojson|safe }}</td></tr>
{% endfor %}

{% for users in x.users %}
  <tr><td>{{ users }}</td></tr>
{% endfor %}

Which simply prints everything into the first column.

These experiments and many other dead ends lead me to believe that there is no simple way to build the table as I would like given my current data structure.

Given this, I have two questions:
1) How would I go about building the table using my current data structure?
2) What is the standard or ideal way to structure data for this use case?

Thanks in advance.

解决方案

Like you said, you could either change your data structure, or change your template code. Here is one way to keep the current structure:

{% for row_index in range(x['date']|count) %}
    <tr>
      <td>{{ x['date'][row_index]|tojson|safe }}</td>
      <td>{{ x['users'][row_index] }}</td>
    </tr>
{% endfor %}

---

Or you could restructure your data in python:

x = zip(x['date'], x['users'])

And then use this template:

{% for row in x %}
    <tr>
      <td>{{ row[0]|tojson|safe }}</td>
      <td>{{ row[1] }}</td>
    </tr>
{% endfor %}

---

You can also structure the data so that the template does not depend on the order of the cells:

from itertools import izip
x = [dict(date=d, user=u) for d, u in izip(x['date'], x['users'])]

Then you can access your data like this:

{% for row in x %}
    <tr>
      <td>{{ row['date']|tojson|safe }}</td>
      <td>{{ row['user'] }}</td>
    </tr>
{% endfor %}

这篇关于如何构建数据以便在Flask中轻松构建HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！