Python / Jinja2 - Trouble rendering list generated through python using HTML Syntax (Django)

Question

Just learning python, Jinja and all, your help would be great! My Python program pulls data and put it into list form. My goal is to display three parts of each line of data in an html table online. I tried to do this by using string replacement and html syntax. The 3 variable are supposed to be under the name, price, and quantity tabs. It came out like this:

Below is how I created the format. I'm sure the way I'm rendering the code writes exactly what I put, which is the html syntax, but I'm unsure of how to input the data so that the html syntax is recognized

    card_list = []
    card_info = "<tbody> \
                    <tr> \
                        <th scope='row'>1</th> \
                        <td>{0}</td> \
                        <td>{1}</td> \
                        <td>{2}</td> \
                    </tr> \
                 </tbody>".format(card_name, buy_price, quantity)
                # 3 variables are one line of a list of data
    card_list.append(card_info)
    return card_list

In Django view.py, I render the list like this:

from Buylist.buy import get_data
data = get_data(ixalan)
def card_data(request):
    return render(request, 'buylist/basic.html', {'content':data})

And the HtML Using Jinja looks like:

{% extends "buylist/header.html" %}

{% block content %}

    <table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>

      # For loop getting data from card_data is here
  {% for c in card_data %}
    {{c}}
  {% endfor %}
</table>
{% endblock %}

I would really appreciate any help! Thanks so much!

Answer 1

It's a good idea to keep your HTML code in templates, and not generate it from Python. You can access nested data structures from Jinja templates, for example tuples or dicts. Here's how you might accomplish this with dictionaries (tuples will probably be easier on memory, but dicts are more readable):

  {% block content %}
      <table class="table">
    <thead class="thead-inverse">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Price</th>
        <th>Quantity</th>
      </tr>
    </thead>

    {% for item in card_data %}
    <tbody>
      <tr>
        <th scope='row'>1</th>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.quantity}}</td>
      </tr>
    </tbody>
    {% endfor %}
  </table>
  {% endblock %}

You can put your data in dicts and pass it in the same way:

data = [  
    {'name': 'Card 1 Name', 'price': 'Card 1 Price', 'quantity': 'Card 1 Quantity'},
    {'name': 'Card 2 Name', 'price': 'Card 2 Price', 'quantity': 'Card 2 Quantity'},
    {'name': 'Card 3 Name', 'price': 'Card 3 Price', 'quantity': 'Card 3 Quantity'},
]

 render(request, 'buylist/basic.html', {'card_data': data})