Jinja2 HTML <a> tags not rendering properly

ChaitanyaPy · (This post was last modified: Jun-28-2020, 05:41 PM by ChaitanyaPy.)

Hello guys.
I am using Flask for the web interface
I am having trouble rendering the template properly.
This is my code:

@app.route('/announcements')
def announcements():
    announcements = f_list()
    return flask.render_template('announcements.html', announcements=announcements)

announcements.html:
=================================================
<html>
<head>
<title>Announcements | My Dummy Company</title>
</head>
<body>
<center>
<h1>My Dummy Company</h1>
<h2>Announcements</h2>
</center>
{{ announcements }}
</body>
</html>
=================================================

The command f_list() returns this value:

<a href="/announcements/post?id=1510147646">My first post</a><br><a href="/announcements/id?post=1636152462">My announcement</a><br><a href="/announcements/id?post=2490566582">My third post</a><br><a href="/announcements/id?post=2682700533">Hi</a><br><a href="/announcements/id?post=2980593702">duio fgstbhguoh rtgb;fbhuio trhiojtribh tg</a><br><a href="/announcements/id?post=3732746396">my fourth post</a><br><a href="/announcements/id?post=5164710657">Hello World</a><br><a href="/announcements/id?post=5952756057">my sixth post</a><br><a href="/announcements/id?post=9651076261">my seventh post</a><br>

Everything until here works exactly as expected.
The problem shows up when the actual page is rendered.
Here is the part where the generated <a> tags need to go in:

Error:</center>
&lt;a href="/announcements/post?id=1510147646"&gt;kldfhnibhkduhlbliufhbu;dnoibf&lt;/a&gt;&lt;br&gt;&lt;a href="/announcements/id?post=1636152462"&gt;My announcement&lt;/a&gt;&lt;br&gt;&lt;a href="/announcements/id?post=2490566582"&gt;duoisgfugfdg&lt;/a&gt;&lt;br&gt;&lt;a href="/announcements/id?post=2682700533"&gt;Hi&lt;/a&gt;&lt;br&gt;&lt;a href="/announcements/id?post=2980593702"&gt;duio fgstbhguoh rtgb;fbhuio trhiojtribh tg&lt;/a&gt;&lt;br&gt;&lt;a href="/announcements/id?post=3732746396"&gt;isfh;sgufhioghldfighdf;g&lt;/a&gt;&lt;br&gt;&lt;a href="/announcements/id?post=5164710657"&gt;Hello World&lt;/a&gt;&lt;br&gt;&lt;a href="/announcements/id?post=5952756057"&gt;idulfsgvkdfdbhguhfbndlhufib;ldfb&lt;/a&gt;&lt;br&gt;&lt;a href="/announcements/id?post=9651076261"&gt;ildgbkldjkbnldf hgibtgf&lt;/a&gt;&lt;br&gt;
</body>

Why do they render in this manner?
Aren't they supposed to be rendered like normal <a> tags?
Is it that I have the generated HTML snippet in one line?
Please help me understand what went wrong.
Thanks in advance Smile

ndc85430 · Jun-28-2020, 05:42 PM

Why are you generating HTML to pass to your template in the first place? Why aren't you passing a list of values and generating the HTML in the template? That's how you're supposed to do it. Jinja is escaping the HTML basically because it doesn't expect you to be passing HTML..

ChaitanyaPy · Jun-28-2020, 06:06 PM

Thanks!
So you are telling that it's better to generate the HTML using Jinja2 and pass the important parameters.
This was the f_list() function:

def f_list():
    u_list = a_list()
    if u_list[0] == '':
        return 'No announcements found.'
    else:
        output = ''
        for post_id in u_list:
            post_details = get(post_id)
            if output == '':
                output = '<a href="/announcements/post?id='+post_id+'">'+post_details['title']+'</a><br>'
            else:
                output = output+'<a href="/announcements/id?post='+post_id+'">'+post_details['title']+'</a><br>'
        return output

So I should use Jinja2's for loop to generate the HTML right?

ndc85430 · Jun-28-2020, 06:07 PM

(Jun-28-2020, 06:06 PM)ChaitanyaPy Wrote: So I should use Jinja2's for loop to generate the HTML right?

Yes.

ChaitanyaPy · Jun-28-2020, 06:12 PM

Thank you @ndc85430

Possibly Related Threads…
Thread		Author	Replies	Views	Last Post
	Python Obstacles \| Jeet-Kune-Do \| BS4 (Tags > MariaDB) [URL/Local HTML]	BrandonKastning	0	1,415	Feb-08-2022, 08:55 PM Last Post: BrandonKastning
	HTML multi select HTML listbox with Flask/Python	rfeyer	0	4,617	Mar-14-2021, 12:23 PM Last Post: rfeyer
	Any way to remove HTML tags from scraped data? (I want text only)	SeBz2020uk	1	3,453	Nov-02-2020, 08:12 PM Last Post: Larz60+
	Easy HTML Parser: Validating trs by attributes several tags deep?	runswithascript	7	3,558	Aug-14-2020, 10:58 PM Last Post: runswithascript
	Python3 + BeautifulSoup4 + lxml (HTML -> CSV) - How to loop to next HTML/new CSV Row	BrandonKastning	0	2,353	Mar-22-2020, 06:10 AM Last Post: BrandonKastning
	Problem rendering file .css?	JohnnyCoffee	4	2,547	Oct-11-2019, 07:31 PM Last Post: JohnnyCoffee
	How do I get rid of the HTML tags in my output?	glittergirl	1	3,720	Aug-05-2019, 08:30 PM Last Post: snippsat
	Beutifulsoup: how to pick text that's not in HTML tags?	pitonas	4	4,704	Oct-08-2018, 01:43 PM Last Post: pitonas
	[split] Jinja2 Exception	Cookies	1	2,222	Jul-26-2018, 12:09 AM Last Post: ichabod801
	Paginate json data in flask or jinja2	soli1994	1	8,298	Jun-28-2018, 06:00 PM Last Post: gontajones

Jinja2 HTML <a> tags not rendering properly

User Panel Messages

Announcements