无法遍历Bootstrap Popover中的数据内容以显示Python列表数据

Question

I'm currently trying to create a local Dashboard that displays certain information about areas of our product, it does what I initially intended but I wanted to extend the functionality slightly and that is where I'm currently stuck.

The Code is written in Python, this gets data from a database and puts it into a python list. The list below is the output of the SQL after it's been put through a for loop and appended to the contractname list.

contractname = [u'Contract Almond', u'Contract Amber', u'Contract Black']

I'm then using the data from this list to render it onto a HTML page using Flask and the Jinja2 templating engine. I have a feature on the dashboard that displays a "total number" and this is working as I intended it too but I wanted to display all the contract name's in a bootstrap popover. If I don't use the jinja2 "for" statement it displays the popover content from the list above and looks kind of ugly.

I'd like to display each value in the same popover box and place each value on another line within the box. At the moment, it's just repeating the element each time and giving each contractname its own popover. The data it should be looping over is in the data-content="{{ name }} .

The Javascript for the popover:

$(function () {
    $('[data-toggle="popover"]').popover()
});

The HTML code:

<div class="center">
{% for name in contractname %}
<p id="Number" data-container="body" data-toggle="popover" data-placement="top" title="Contracts" data-content="{{ name }}">{{ contracts }}</p>
{% endfor %}
</div>

I can see why it's repeating itself, as the for loop is only pointed at the <p> tag but I just cannot figure out how to loop over only the data-content="{{ name }} part of the element.

I've looked all over google and stackoverflow but I haven't yet found a solution that makes this work. This is maybe something very simple that I'm not seeing as I've been looking at it for so long.

Any help on this would be great! Thank you in advance!

Answer 1

This should do it.

<div class="center">
<p id="Number" data-container="body" data-toggle="popover" data-placement="top" title="Contracts" data-content="{% for name in contractname %}{{ name }} <br/> {% endfor %}">{{ contracts }}</p>
</div>