如何正确展示Django ArrayField存储的数组数据至HTML表格

问题根因 #

你遇到的输出格式异常有两种可能：

1. 插入数据时误将Python列表转为字符串存入了ArrayField，导致查询出来的是字符串类型的列表表示
2. 存储逻辑正确，但模板直接输出列表对象，Django自动转为了带括号的字符串展示

第一步：校验数据存储正确性 #

先在视图函数中添加测试代码，确认字段类型：

def purchaseDetails(request,pk):
    invo_data = PurchaseInvoice.objects.filter(invoice=pk)
    # 测试用代码，确认字段类型
    for item in invo_data:
        print(type(item.product_name), item.product_name)
    return render(request,'purchase/invoice_details.html',{'invoice':invo_data})

• 如果输出为<class 'list'>，说明存储正常，直接看第二步展示方案
• 如果输出为<class 'str'>，说明插入逻辑错误：插入ArrayField时直接传Python列表即可，不要用str()、json.dumps等做额外转换，Django会自动适配PostgreSQL的数组格式。如果已经有存量数据，可以用ast.literal_eval把字符串转回列表：

  import ast
  def purchaseDetails(request,pk):
      invo_data = PurchaseInvoice.objects.filter(invoice=pk)
      for item in invo_data:
          if isinstance(item.product_name, str):
              item.product_name = ast.literal_eval(item.product_name)
              item.price = ast.literal_eval(item.price)
              item.quantity = ast.literal_eval(item.quantity)
      return render(request,'purchase/invoice_details.html',{'invoice':invo_data})
  

第二步：按需求选择展示方案 #

方案1：同一发票的所有商品放在同一行，用逗号分隔

直接用Django模板自带的join过滤器拼接数组元素即可：

{% for data in invoice %}
    <tr>
        <td>{{ data.product_name|join:", " }}</td>
        <td>{{ data.price|join:", " }}</td>
        <td>{{ data.quantity|join:", " }}</td>
    </tr>
{% endfor %}

方案2：每个商品单独占一行（推荐，符合常规发票展示逻辑）

先在视图中把同发票的商品信息按索引打包，方便模板循环：

def purchaseDetails(request,pk):
    invo_data = PurchaseInvoice.objects.filter(invoice=pk)
    processed_data = []
    for inv in invo_data:
        # 按索引匹配商品名、价格、数量，每个元素对应一个商品
        product_list = list(zip(inv.product_name, inv.price, inv.quantity))
        processed_data.append({
            "invoice_no": inv.invoice,
            "date": inv.date,
            "products": product_list
        })
    return render(request,'purchase/invoice_details.html',{'invoice_list': processed_data})

模板写法：

{% for inv in invoice_list %}
<!-- 展示发票基础信息 -->
<tr>
    <td colspan="3">发票号：{{ inv.invoice_no }} | 开票日期：{{ inv.date }}</td>
</tr>
<!-- 循环展示每个商品 -->
{% for product in inv.products %}
<tr>
    <td>{{ product.0 }}</td>
    <td>{{ product.1 }}</td>
    <td>{{ product.2 }}</td>
</tr>
{% endfor %}
{% endfor %}

内容的提问来源于stack exchange，提问作者Shanzedul