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

Answer 1

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