Jinja2 and Json

Viewed 36776

I have for example a JSON File

{
    "Google":{
    "Web":"www.web.de",
    "Apps":{
        "Drive": "DriveLink",
        "Dropbox": "DropboxLink"
    },
    "Google Main":"http://mail.google.com",
    "G+":"http://plus.google.com"
    },  
    "Social":{
    "Facebook":"http://www.facebook.de",
    "G+":"https://plus.google.com",
    "Xing":"http://www.xing.de",
    "LinkedIn":"http://www.linkedin.com",
    "Tumblr":"http://www.tumblr.com"
    },
    "Fun":{
    "Reddit":"http://www.reddit.com"
    }
}

As you can see I have under the section Google a Nested Section named Apps

With CherryPy I hand over this JSON Object as following with the name linksList:

@cherrypy.expose
def index(self):
    linksFile = open('links.json', 'r')
    linksList = json.load(linksFile) 

    template = jinjaEnv.get_template('index.html')
    return template.render(linksList=linksList)

What I want is to render following:

  1. Google
    • Web (as a link)
    • Google Main
    • G+
    • Apps
      • Drive
      • Dropbox
  2. Social
    • Facebook
    • G+
    • Xing

and so on

What I don't understand is to do is to render this nested Objects like "Apps" recursively

2 Answers

My 2 cents, just if someone comes here looking for rendering a JSON using Jinja, and complementing the response from @Ryon Sherman :)

  1. Since JSON may have int values as well as strings, you can use if value is mapping (and flip the if-condition)
  2. If your output must feel like a JSON you can use {{key|indent(width)}} + loop.depth
  3. In my case, the template was for an email and key|indent() didn't work as expected so I ended up using an auxiliar {% for %} loop:
<div>
    <code>{
    {% for key, value in dic.items() recursive %}
    {% if value is mapping %}
    <p>
     {% for it in range(loop.depth) %}&nbsp;&nbsp;{% endfor %}{{key}}: {
    </p>
    {{ loop(value.items()) }}
    <p>
      {% for it in range(loop.depth) %}&nbsp;&nbsp;{% endfor %}}
    </p>
    {% else %}
    <p>
      {% for it in range(loop.depth) %}&nbsp;&nbsp;{% endfor %}{{key}}: {{value}},
    </p>
    {% endif %}
    {% endfor %}
    }</code>
</div>
Related