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 >
          
  <div >
    <span>{{ d.StartMonth }}/{{ d.StartYear }}</span>
    <span>{{ d.EndMonth }}/{{ d.EndYear }}</span>
  </div>
          
  <div ></div>
          
  <div >
            
    <header>
      <h3>{{ d.Attainment }}</h3>
      <span ><a href={{ d.SchoolURL }}>{{ d.School }}</a></span>
     <span >{{ 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]

CodePudding user response：

What you want is something like this:

{% for key, value in data.items() if key == 'Education' %}
    {% for v in value %}
        <section >
            <div >
                <span>{{ v.StartMonth }}/{{ v.StartYear }}</span>
                <span>{{ v.EndMonth }}/{{ v.EndYear }}</span>
            </div>
            <div ></div>
            <div >
                <header>
                    <h3>{{ v.Attainment }}</h3>
                    <span ><a href={{ v.SchoolURL }}>{{ v.School }}</a></span>
                    <span >{{ 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 >
            <div >
                <span>{{ d.StartMonth }}/{{ d.StartYear }}</span>
                <span>{{ d.EndMonth }}/{{ d.EndYear }}</span>
            </div>
            <div ></div>
            <div >
                <header>
                    <h3>{{ d.Attainment }}</h3>
                    <span ><a href={{ d.SchoolURL }}>{{ d.School }}</a></span>
                    <span >{{ d.City }}, {{ d.State }}</span>
                </header>
            </div>
        </section>
{% endfor %}

CodePudding user response：

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

This worked...

{% for e in data.Education %}

<section >
          
  <div >
    <span>{{ e.StartMonth }}/{{ e.StartYear }}</span>
    <span>{{ e.EndMonth }}/{{ e.EndYear }}</span>
  </div>
          
  <div ></div>
          
  <div >
            
    <header>
      <h3>{{ e.Attainment }}</h3>
      <span ><a href={{ e.SchoolURL }}>{{ e.School }}</a></span>
     <span >{{ e.City }}, {{ e.State }}</span>
    </header>
            
  </div>
  
</section>