Rendering json as dictionary in template

I have a JSON object returned from server. It looks like this :

{"1":{"id":"1","name":"autos"},
"2":{"id":"2","name":"business"},
"3":{"id":"3","name":"cities"},
"4":{"id":"4","name":"drama"},
"5":{"id":"5","name":"movies"},
"6":{"id":"6","name":"finance"},
"7":{"id":"7","name":"electronics"}}

So I'm rendering a template as a string with my JSON included :

<h3>Ugly, raw list. Yuck !</h3>
1: {{ interests }}
<ul>
    {% for k,v in interests.items %}
        <li>{{k}}. - {{ v }}</li>
    {% endfor %}
</ul>

template_name = 'socialauth/interests.html'
html = render_to_string(template_name, RequestContext(request, {'interests': ResultDict,}))

and as a result I'm getting :

<h3>Ugly, raw list. Yuck !</h3>
1: {&quot;1&quot;:{&quot;id&quot;:&quot;1&quot;,&quot;name&quot;:&quot;autos&quot;},&quot;2&quot;:{&quot;id&quot;:&quot;2&quot;,&quot;name&quot;:&quot;business&quot;},&quot;3&quot;:{&quot;id&quot;:&quot;3&quot;,&quot;name&quot;:&quot;cities&quot;},&quot;4&quot;:{&quot;id&quot;:&quot;4&quot;,&quot;name&quot;:&quot;drama&quot;},&quot;5&quot;:{&quot;id&quot;:&quot;5&quot;,&quot;name&quot;:&quot;movies&quot;},&quot;6&quot;:{&quot;id&quot;:&quot;6&quot;,&quot;name&quot;:&quot;finance&quot;},&quot;7&quot;:{&quot;id&quot;:&quot;7&quot;,&quot;name&quot;:&quot;electronics&quot;}}
<ul>   
</ul>

So it looks like my {{ interests }} variable is not treated as a dictionary. But why ? What more, now I'm including the rendered list to parent template which is also rendered as a string (because I'm loading it with ajax). A开发者_StackOverflownd the final result looks as follows :

template:

<div class="connect-twitter" style="background:#f8f8f8">
    <div id="likes-list">
        {{ likes|safe }}
    </div>
    <a href="#" class="submit-step-2">Proceed</a>  
</div>

result:

Content-Type: text/html; charset=utf-8
{"html": "<h3>Ugly, raw list. Yuck !</h3>\n\n1: {&quot;1&quot;:{&quot;id&quot;:&quot;1&quot;,&quot;name&quot;:&quot;autos&quot;},&quot;2&quot;:{&quot;id&quot;:&quot;2&quot;,&quot;name&quot;:&quot;business&quot;},&quot;3&quot;:{&quot;id&quot;:&quot;3&quot;,&quot;name&quot;:&quot;cities&quot;},&quot;4&quot;:{&quot;id&quot;:&quot;4&quot;,&quot;name&quot;:&quot;drama&quot;},&quot;5&quot;:{&quot;id&quot;:&quot;5&quot;,&quot;name&quot;:&quot;movies&quot;},&quot;6&quot;:{&quot;id&quot;:&quot;6&quot;,&quot;name&quot;:&quot;finance&quot;},&quot;7&quot;:{&quot;id&quot;:&quot;7&quot;,&quot;name&quot;:&quot;electronics&quot;}}\n\n<ul>\n    \n</ul>"}

And when this code is inserted into html it looks just awful :

http://img204.imageshack.us/img204/3858/listaxv.png

What the hell ? Why it's not rendering normally as strings but some 'Content-type' header is added ?

It looks like the template variable interests is just a string with the json response. The string gets escaped in the template, that's why you end up with all the ". Check if the response from the server is correctly parsed.

To verify the type, you can use the type class, i.e. type(ResultDict).

Do you do any conversion on the respons, like $parseJSON(string) or eval(string) to convert the response to a JS object?