'How to access nested JSON with Jinja?

I'm learning Jinja for building a simple website. How do I access values of nested JSON in the Jinja syntax?

Example: How do I only access the "Education" key in the JSON below to populate the HTML snippet?

JSON snippet

{
    "Education": [
        {
            "SchoolType": "University",
            "School": "State University",
            "SchoolURL": "https://admission.edu",
            "StartMonth": 9,
            "StartYear": 2019,
            "EndMonth": 5,
            "EndYear": 2022,
            "City": "Test",
            "State": "WA",
            "Attainment": "Bachelor's Degree",
            "Accolades": [
                {
                    "AccoladeType": "Major",
                    "Accolade": "Test Communications"
                }
            ]
        },
        {
            "SchoolType": "Junior College",
            "School": "Pierce College",
            "SchoolURL": "https://www.pierce.edu/",
            "StartMonth": 9,
            "StartYear": 2017,
            "EndMonth": 6,
            "EndYear": 2019,
            "City": "Lakewood",
            "State": "WA",
            "Attainment": "Diploma",
            "Accolades": [
            ]
        }
    ],
    "Employers": [
        {
            "EmploymentType": "Food Service",
            "Employer": "Test Brew",
            "EmployerURL": "",
            "StartMonth": 9,
            "StartYear": 2020,
            "EndMonth": null,
            "EndYear": null,
            "City": "Olympia",
            "State": "WA",
            "PositionsHeld": [
                {"Position": "Barista"}
            ]
        },
        {
            "EmploymentType": "Food Service",
            "Employer": "The Steakhouse",
            "EmployerURL": "https://www.steakmill.com/",
            "StartMonth": 7,
            "StartYear": 2019,
            "EndMonth": 1,
            "EndYear": 2020,
            "City": "Milton",
            "State": "WA",
            "PositionsHeld": [
                {"Position": "Busser"},
                {"Position": "Dishwasher"}
            ]
        }
    ]
}

HTML snippet w/ Jinja

{% for d in data %}

<section class="blocks">
          
  <div class="date">
    <span>{{ d.StartMonth }}/{{ d.StartYear }}</span>
    <span>{{ d.EndMonth }}/{{ d.EndYear }}</span>
  </div>
          
  <div class="decorator"></div>
          
  <div class="details">
            
    <header>
      <h3>{{ d.Attainment }}</h3>
      <span class="place"><a href={{ d.SchoolURL }}>{{ d.School }}</a></span>
     <span class="location">{{ d.City }}, {{ d.State }}</span>
    </header>
            
  </div>
  
</section>

{% endfor %}

Tried (with various errors)

  • Nested for
{% for d in data %}
    {% for e in d[Education] %}
    <code shown above>
    {% end for %}
{% end for %}
  • d.StartMonth
  • d[Education].StartMonth
  • d[Education][StartMonth]
htmljsonjinja2


Solution 1:[1]

What you want is something like this:

{% for key, value in data.items() if key == 'Education' %}
    {% for v in value %}
        <section class="blocks">
            <div class="date">
                <span>{{ v.StartMonth }}/{{ v.StartYear }}</span>
                <span>{{ v.EndMonth }}/{{ v.EndYear }}</span>
            </div>
            <div class="decorator"></div>
            <div class="details">
                <header>
                    <h3>{{ v.Attainment }}</h3>
                    <span class="place"><a href={{ v.SchoolURL }}>{{ v.School }}</a></span>
                    <span class="location">{{ v.City }}, {{ v.State }}</span>
                </header>
            </div>
        </section>
    {% endfor %}
{% endfor %}

By using items(), it will allow you to iterate through the key value pairs ("Education", array of values)

You can also use dot notation to pull the key like this:

{% for d in data.Education %}
        <section class="blocks">
            <div class="date">
                <span>{{ d.StartMonth }}/{{ d.StartYear }}</span>
                <span>{{ d.EndMonth }}/{{ d.EndYear }}</span>
            </div>
            <div class="decorator"></div>
            <div class="details">
                <header>
                    <h3>{{ d.Attainment }}</h3>
                    <span class="place"><a href={{ d.SchoolURL }}>{{ d.School }}</a></span>
                    <span class="location">{{ d.City }}, {{ d.State }}</span>
                </header>
            </div>
        </section>
{% endfor %}

Solution 2:[2]

Needed to use dot notation after the data object to drill into the nested JSON.

This worked...

{% for e in data.Education %}

<section class="blocks">
          
  <div class="date">
    <span>{{ e.StartMonth }}/{{ e.StartYear }}</span>
    <span>{{ e.EndMonth }}/{{ e.EndYear }}</span>
  </div>
          
  <div class="decorator"></div>
          
  <div class="details">
            
    <header>
      <h3>{{ e.Attainment }}</h3>
      <span class="place"><a href={{ e.SchoolURL }}>{{ e.School }}</a></span>
     <span class="location">{{ e.City }}, {{ e.State }}</span>
    </header>
            
  </div>
  
</section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 CodeLikeBeaker
Solution 2 SeaDude

Related Questions