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'] ?

Solution

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 }}">

Comments

[jpic]

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.

[userBG]

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]

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

[userBG]

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]

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.