How to Render a Local JSON File in a Django Template: Load with json.load and Pass Context

Learn how to render JSON in Django templates: read a local file with json.load, pass data through context, and iterate over emp_details for server-side rendering

Rendering JSON in a Django template is straightforward once you wire the data flow correctly. The typical stumbling block is trying to use a template or client-side script without first loading and passing the JSON from the view. Below is a compact guide to read a local JSON file, deserialize it on the server with json.load, and render its values in a Django template.

Problem overview

The JSON file lives at assets/jsons/quotes.json and contains a list under emp_details with fields like emp_name, email, and job_profile. The homepage view returns a template without attaching any data, so the template has nothing to display.

Problem code example

View function that renders a page but doesn’t load or pass the JSON:

from django.shortcuts import render
def start_page(req):
    return render(req, 'homepage.html')

Template snippet that tries to do something on the client side but receives no data from the server:

{% block content %}
<script type="text/javascript">
    console.log(json1_data);
</script>
<h1>Home</h1>
<p id="demo"></p>
{% endblock %}

What’s actually wrong

The view never loads the file or adds a context variable for the template to iterate over. Without a context value, the template has no awareness of emp_details, and any attempt to access data will result in empty output. The key is to read and deserialize the JSON on the server, then pass it to render alongside the template.

Solution: load, deserialize, and pass context

Read the file in the view using json.load and pass the resulting Python object into the template context. Then iterate over emp_details in the template.

Fixed view:

from django.shortcuts import render
import json
def main_page(req):
    with open('assets/jsons/quotes.json') as fh:
        payload = json.load(fh)
    return render(req, 'homepage.html', { 'payload': payload })

Template that renders the JSON data:

{% block content %}
{% for row in payload.emp_details %}
<section>
<p><strong>{{ row.emp_name }}</strong></p>
<p>{{ row.email }}</p>
<p>{{ row.job_profile }}</p>
</section>
{% endfor %}
{% endblock content %}

URL mapping that points the root path to the view:

from django.urls import path
from . import views
urlpatterns = [
    path('', views.main_page, name='home'),
]

Why this matters

This small example highlights how Django’s request–view–template flow works. Data must originate from the view, be prepared on the server (in this case, by deserializing JSON), and only then reach the template for rendering. Understanding this pattern is essential for predictable server-side rendering and avoids confusion when a template appears to “do nothing.”

Conclusion and practical tips

Read and deserialize your JSON inside the view, pass a clearly named context variable, and iterate over it in the template. Keep the file path stable and make sure the template references the actual keys present in the JSON, such as emp_details, emp_name, email, and job_profile. If this data needs to evolve beyond a static file, consider moving it into a database to make querying and updates more manageable.