Passing objects from Django to Javascript DOM

Since Django 2.1 there is the [json-script template tag][1]. From the docs:

> **json_script**
>
> Safely outputs a Python object as JSON, wrapped in a <script> tag,
> ready for use with JavaScript.
>
> Argument: HTML “id” of the <script> tag.
>
> For example:
>
> {{ value|json_script:"hello-data" }}
> If value is the dictionary `{'hello': 'world'}`, the output will be:
>
> <script id="hello-data" type="application/json">
> {"hello": "world"}
> </script>
> The resulting data can be accessed in JavaScript
> like this:
>
> var value = JSON.parse(document.getElementById('hello-data').textContent);
>
> XSS attacks are mitigated by escaping the characters “<”, “>” and “&”. For
> example if value is `{'hello': 'world</script>&'}`, the output is:
>
> <script id="hello-data" type="application/json">
> {"hello": "world\\u003C/script\\u003E\\u0026amp;"}
> </script>

> This is compatible
> with a strict Content Security Policy that prohibits in-page script
> execution. It also maintains a clean separation between passive data
> and executable code.

[1]:

[To see links please register here]

For me to send the whole QuerySet (while preserving the fields names; sending `object` not `list`). I used the following

# views.py
units = Unit.objects.all()
units_serialized = serializers.serialize('json', units)
context['units'] = units_serialized

and just use `safe` tag in the template

# template.html
<script>
console.log({{units|safe}});
</script>

**NOTE for django 2.1**

i found this a little confusing on django documentation so simply explaining a little bit easy way.

we would normally use this like

{{ my_info }}

or loop over it depending on what we needed. But if we use the following filter,

json_script
we can safely output this value as JSON

{{ my_info|json_script:"my-info" }}
Our data has been added as JSON, wrapped in a script tag, and we can see the data. We can now use this value by looking it up in JavaScript like so:

info = JSON.parse(document.getElementById('my-info').textContent);

either;

read object using `{{ django_list }}` and then remove unwanted characters

or do;
```
{{ django_list | safe}}
```

Be careful on also making sure that you output JSON data correctly from Django, otherwise all trials on the frontend side will be a waste of time. In my case I could not use JsonResponse as part of the render function so I did the following:

```
def view(self, request):

data = []
machine_data = list(Machine.objects.filter(location__isnull=False).values_list('serial', 'location', 'customer__name'))
data.append({
"locations": machine_data,
})

return render(request, 'admin/company/device/map.html', {
"machines": data
})
```

And on the frontend:
```
{% block content %}

{{ machines_with_location|json_script:"machineLocationData" }}

<div id="content-main">

<h1>Title</h1>

<script type="text/javascript">

const locationDataFromJson = JSON.parse(document.getElementById('machineLocationData').textContent);

</script>

</div>

{% endblock %}
```