---
title: '|json_script'
description: outputs a Python object as JSON inside of a `script` element.
date: '2026-08-02'
categories:
  - Filter
  - Coding
canonical: https://coolify.djangotemplatetagsandfilters.com/filters/json_script/
doc_link: https://docs.djangoproject.com/en/6.0/ref/templates/builtins/#json-script
---

# |json_script

outputs a Python object as JSON inside of a `script` element.

## Documentation

Outputs a Python object as JSON inside of a `script` element.

This is the safest way to include data to be used by JavaScript.

### Variable

```django
classes = {
    'Python': [
        'Intro Python', 'Advanced Python', 'Data Science', 'Django'
    ],
    'Databases': [
        'Intro PostgreSQL', 'Intro MySQL', 'Intro SQL Server', 'Intro Oracle'
    ],
    'Web': [
        'HTML', 'CSS', 'JavaScript'
    ],
    'XML': [
        'Intro XML'
    ]
}
```

### Template

```django
{{ classes|json_script:'classdata' }}
```

### Result

```django
<script id="classdata" type="application/json">{"Python": ["Intro Python", "Advanced Python", "Data Science", "Django"], "Databases": ["Intro PostgreSQL", "Intro MySQL", "Intro SQL Server", "Intro Oracle"], "Web": ["HTML", "CSS", "JavaScript"], "XML": ["Intro XML"]}</script>
```

You can then use another `script` element to consume this content:

```django
<ol>
  <script>
    const classes = JSON.parse(document.getElementById('classdata').textContent);
    pythonClasses = classes['Python'];
    for (pythonClass of pythonClasses) {
      document.write(`<li>${pythonClass}</li>`);
    }
  </script>
</ol>
```

You could (and probably should) point to an external JavaScript file rather than using embedded JavaScript.

## Commentary

See Adam Johnson’s [Safely Including Data for JavaScript in a Django Template](https://adamj.eu/tech/2020/02/18/safely-including-data-for-javascript-in-a-django-template/) for a detailed explanation of how to safely include dynamic data for JavaScript processing.