Print Django model data as JavaScript Array

Question

I have printed a for loop as below in my HTML Template:

                <td> 
                {% for athlete in booking.athlete.all %}
                {{athletes.id}}
                {% endfor %}
                </td>

The Output in HTML is as below.

Is it possible to get the output to appear as [ "1", "2", "3" ], so we can then use this as a JS array or object?

I have tried a few things from the Django Template but it does not remove the additional white space.

taherh · Accepted Answer · 2022-05-24 07:01:28Z

1

The easiest way is probably to use a custom template tag to get the list of athlete.ids, and then the built-in json_script filter to render those ids as json.

Let's assume your app name is myapp. If you don't have any custom filters yet, create the directory myapp/templatetags/, and add an empty __init__.py file. Then in the file myapp/templatetags/myapp_filters.py add:

from django import template

register = template.Library()

@register.filter
def qs_to_id_list(qs):
    return list(qs.values_list('id', flat=True))

In your template example, you would do:

{% load myapp_filters %}
{% for booking in bookings %}
  <tr>
    <td>{{booking.id}}</td>
    <td>{{booking.program_type}}</td>
    <td>{{booking.booking_time}}</td>

    {# set a unique script id for easier access in javascript #} 
    {% with script_id='athletes-data-'|add:booking.id %}
        {{booking.athlete.all|qs_to_id_list|json_script:script_id}}
    {% endwith %}
  </tr>
{% endfor %}

The json_script filter will render a block like this (in each table row):

<script id="athletes-data-5" type="application/json">[1, 2, 3]</script>

which can be accessed in your client-side javascript.

edited May 24, 2022 at 7:01

answered May 24, 2022 at 2:58

taherh

9937 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mark Over a year ago

Thanks Taherh, for the help. I tried your suggestion above but I get the following error "AttributeError at /admin_bookings/ 'ManyToManyDescriptor' object has no attribute 'values_list'". The Model I am working with is called Bookings and that has a Many to Many relationship named athlete, which connects to the Athlete Model.

taherh Over a year ago

I updated the answer to match the call pattern in the question, it should probably work now.

Mark Over a year ago

Think we are nearly there with this now. I have added in my View and HTML. Now it loops through the data correctly but prints the same athlete.id. Currently it prints the id [2] (See Script output rather than [1,2,3]

taherh Over a year ago

I rewrote the answer to reflect your updated question. You do not need to add anything to your view, you can remove that. Instead you can use the custom filter to get the list of ids that can be passed to json_script.

Mark Over a year ago

Thanks Taherh, I have edited the question to remove the updates. Just working on registering the template tag, as it keeps saying 'advancement_filters' is not a registered tag library. Must be one of: admin_list admin_modify admin_urls cache i18n l10n log static tz

|

Collectives™ on Stack Overflow

Print Django model data as JavaScript Array

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related