Converting dict object to string in Django/Jinja2 template

Question

If you use Django or Jinja2, you've probably ran into this problem before. I have a JSON string that looks like this:

{
  "data":{
    "name":"parent",
    "children":[
      {
        "name":"child_a",
        "fav_colors":[
          "blue",
          "red"
        ]
      },
      {
        "name":"child_b",
        "fav_colors":[
          "yellow",
          "pink"
        ]
      }
    ]
  }
}

Now I want to pass this to my Jinja2 template:

j = json.loads('<the above json here>')
self.render_response('my_template.html', j)

...and iterate it like this:

<select>
{% for p in data recursive %}
        <option disabled>{{ p.name }}</option>
        {% for c in p.children %}
            <option value="{{ c.fav_colors|safe }}">{{ c.name }}</option>
        {% endfor %}
{% endfor %}
</select>

This is where I'm having the problem: everything works except Jinja2 outputs unicode encoded values for c.fav_colors. I need c.fav_colors as a valid javascript array so that I can access it from javascript. How can I get Jinja to print that value as ascii text like: ['blue','red'] instead of [u'blue', u'red'] ?

No </option> closing tag ? Also, why not [{% for item in c %}"item"{% if not forloop.last %},{% endif %}{% endfor %}] ? This is what templates are for after all: converting python values into whatever needs the view. — jpic
– jpic, Commented Jan 4, 2012 at 13:10
Updated that option tag. The loop syntax I'm using here is for clarity. I'm just trying to showcase the problem: how to output c.fav_colors as valid javascript compatible array: ['blue','red'] — userBG
– userBG, Commented Jan 4, 2012 at 13:17

Daniel Roseman · Accepted Answer · 2012-01-04 13:36:49Z

17

You need to convert the fav_colors list back to JSON. Probably the easiest way to do this would be with a quick template filter:

@register.filter
def to_json(value):
    return mark_safe(simplejson.dumps(value))

So now you could do

<option value="{{ c.fav_colors|to_json }}">

answered Jan 4, 2012 at 13:36

Daniel Roseman

602k68 gold badges911 silver badges924 bronze badges

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

4 Comments

userBG Over a year ago

duh! of course. but I'm actually using Jinja2 with webapp2 so now I need to find out how to do '@register.filter' part for Jinja.

userBG Over a year ago

Thank you. I can't believe I didn't think of that :-)

userBG Over a year ago

If anybody's wondering how I did this in webapp2: just lookup Jinja2 in webapp2 docs, then do something like this in the BaseHandler class: j=jinja2.get_jinja2(app=self.app) j.environment.filters.update({'to_json': to_json})

Rohit Banga Over a year ago

I had to use escape(mark_safe(simplejson.dumps(value))) in order to make it work. I was using this as part of the data attribute of li element in HTML and dynatree would not parse it correctly if I don't use escape.

LunkRat · Accepted Answer · 2023-10-15 15:36:42Z

3

Jinja2 now has a tojson() filter built-in https://jinja.palletsprojects.com/en/3.1.x/templates/#jinja-filters.tojson

{{ my_dict|tojson }}

Might not be exactly what OP (or another reader) needs, but worth mentioning here.

answered Oct 15, 2023 at 15:36

LunkRat

3564 silver badges7 bronze badges

Collectives™ on Stack Overflow

Converting dict object to string in Django/Jinja2 template

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related