[FIXED] Is there a way to do string removing in html tags?

Issue

{% for term in terms %}
     <div class="term term-count-{{loop.index}}">
        <b>{{ term }}</b>: &nbsp;&nbsp; {{ terms[term] }} &nbsp;&nbsp;
     </div>
{% endfor %}

'terms' is a dictionary with the value as a list in Python:

terms = {'a':['1','2','3'], 'b':['4','5','6'], 'c': ['x', 'y', 'z']}

The current html code will display the 'terms' as follows in the for loop:

a: ['1','2','3']
b: ['4','5','6']
c: ['x', 'y', 'z']
 

I want the quotes to be removed as follows:

a: [1, 2, 3]
b: [4, 5, 6]
c: [x, y, z]

Is there a way to run a string removing function in the html blocks? If not, is there other possible ways to display as I expected? This is in a Flask project.

Solution

Change your html to

{% for key, value in terms.items() %}
     <div class="term term-count-{{loop.index}}">
        <b>{{ key }}</b>: &nbsp;&nbsp; [{{ value|join(', ') }}] &nbsp;&nbsp;
     </div>
{% endfor %}

it will render to:

 <div class="term term-count-1">
    <b>a</b>: &nbsp;&nbsp; [1, 2, 3] &nbsp;&nbsp;
 </div>

 <div class="term term-count-2">
    <b>b</b>: &nbsp;&nbsp; [4, 5, 6] &nbsp;&nbsp;
 </div>

 <div class="term term-count-3">
    <b>c</b>: &nbsp;&nbsp; [x, y, z] &nbsp;&nbsp;
 </div>

Answered By - buran