Jinja2 template rendering getting empty string

Question

I am getting a response from the REST service. This response is an array of JSON objects. Using this array, I am trying to display the individual property of each JSON object on HTML page using Jinja2 template framework. But it is showing the empty string on the browser.

The JSON response which I am getting from the service is

{
    u'messages': 
    [
        {u'text': u'hello', u'author_id': 1, u'pub_date': 1518506778, u'message_id': 1}, 
        {u'text': u'hell', u'author_id': 2, u'pub_date': 1518420378, u'message_id': 2}, 
    ]
}

Not sure what is the u character before every string. The rest service is developed in Flask.

Below is the python code:

r = requests.get('http://127.0.0.1:3000/api/v1.0/messages')
@app.route('/messages')
def public_timeline():
    """Displays the latest messages of all users."""
    python_message = json.loads(r.text)
    print("******")
    print(python_message)
    return render_template('messages.html', messages = python_message)

And the template code is :

    {% if messages %}

   <ul id=”messages”>
      {% for message in messages %}
         <li>
            <div class=”text”>
               <a>{{message['text']}}</a>
            </div>
         </li>
      {% endfor %}
   </ul>
{% else %}
   <p>Messages not available :(</p>
{% endif %}

I think the problem is due to the unnecessary u character before each string. How can I resolve problem of blank output on the browser screen?

The output in the browser is:

<html><head></head><body><ul id="”messages”">

     <li>
        <div class="”text”">
           <a></a>
        </div>
     </li> ....

The u prefix is a type indicator, you have Unicode strings. This is normal and expected when decoding JSON data. They are not the problem. — Martijn Pieters
– Martijn Pieters, Commented Mar 10, 2018 at 19:43
Can you give us the output that is produced? Do you get Messages not available instead? Does the print(python_message) line produce output on your console where Flask is running? — Martijn Pieters
– Martijn Pieters, Commented Mar 10, 2018 at 19:45
Given that messages is a dictionary, the for message in messages loop will only produce the single 'messages' key from the dictionary. Did you mean to use python_message['messages'] instead? — Martijn Pieters
– Martijn Pieters, Commented Mar 10, 2018 at 19:46
@MartijnPieters: I am getting the empty string on the browser screen. The snippet of the HTML page is <html><head></head><body><ul id="”messages”"> <li> <div class="”text”"> <a></a> </div> </li> .... Yes, the print(python_message) displays the server response as mentioned above. — Swapnil
– Swapnil, Commented Mar 10, 2018 at 19:50

Martijn Pieters · Accepted Answer · 2018-03-10 20:05:05Z

2

You have Unicode strings, the u prefix is a type indicator. They have nothing to do with your issues, and are entirely normal when decoding JSON.

Your issue is that you are looping over the keys of the outer dictionary, not over the messages contained in the python_message[u'messages'] list.

Get that list; using dict.get() you can produce a default value if the key is missing, here a list would be helpful:

return render_template('messages.html', messages = python_message.get(u'messages', []))

You need to be careful with what editor you are using to write your template, as you have used ” characters as where you should have used " characters. In your output, it is clear your browser has put correct quotes around those attributes, so now your you have a div with id ”messages”, not messages.

Demo, with corrected quotes:

>>> from jinja2 import Template
>>> python_message = {
...     u'messages':
...     [
...         {u'text': u'hello', u'author_id': 1, u'pub_date': 1518506778, u'message_id': 1},
...         {u'text': u'hell', u'author_id': 2, u'pub_date': 1518420378, u'message_id': 2},
...     ]
... }
>>> template = Template('''
... {% if messages %}
... <ul id="messages">
...    {% for message in messages %}
...       <li>
...          <div class="text">
...             <a>{{message['text']}}</a>
...          </div>
...       </li>
...    {% endfor %}
... {% else %}
...    <p>Messages not available :(</p>
... {% endif %}
... ''')
>>> print(template.render(messages=python_message['messages']))


<ul id="messages">

      <li>
         <div class="text">
            <a>hello</a>
         </div>
      </li>

      <li>
         <div class="text">
            <a>hell</a>
         </div>
      </li>


>>> print(template.render(messages=[]))


   <p>Messages not available :(</p>

edited Mar 10, 2018 at 20:05

answered Mar 10, 2018 at 19:55

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Swapnil Over a year ago

This is the perfect solution! Thanks!

Swapnil Over a year ago

I am new to Python and Flask. I am not aware of any of the best IDEs available. Can you suggest me few?

Martijn Pieters Over a year ago

That's too broad, and I'm Old Skool and use different editors from most. I'm not the person to ask. (and I use Vim, Sublime, and Nuclide (Atom on steriods) depending on context).

Collectives™ on Stack Overflow

Jinja2 template rendering getting empty string

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related