将 Django 模型数据打印为 JavaScript 数组
Print Django model data as JavaScript Array
我在我的 HTML 模板中打印了一个 for 循环,如下所示:
<td>
{% for athlete in booking.athlete.all %}
{{athletes.id}}
{% endfor %}
</td>
HTML中的输出如下。
<td>
1
2
3
</td>
是否可以让输出显示为 ["1", "2", "3" ],这样我们就可以将其用作 JS 数组或对象?
我已经从 Django 模板中尝试了一些东西,但它没有删除额外的白色 space。
最简单的方法可能是使用自定义模板标签来获取 athlete.ids
的列表,然后 built-in json_script
过滤器将这些 id 呈现为 json.
我们假设您的应用名称是 myapp
。如果您还没有任何自定义过滤器,请创建目录 myapp/templatetags/
,并添加一个空的 __init__.py
文件。然后在文件 myapp/templatetags/myapp_filters.py
添加:
from django import template
register = template.Library()
@register.filter
def qs_to_id_list(qs):
return list(qs.values_list('id', flat=True))
在您的模板示例中,您可以:
{% 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 %}
json_script
过滤器将呈现这样的块(在每个 table 行中):
<script id="athletes-data-5" type="application/json">[1, 2, 3]</script>
可以在您的 client-side javascript.
中访问
我在我的 HTML 模板中打印了一个 for 循环,如下所示:
<td>
{% for athlete in booking.athlete.all %}
{{athletes.id}}
{% endfor %}
</td>
HTML中的输出如下。
<td>
1
2
3
</td>
是否可以让输出显示为 ["1", "2", "3" ],这样我们就可以将其用作 JS 数组或对象?
我已经从 Django 模板中尝试了一些东西,但它没有删除额外的白色 space。
最简单的方法可能是使用自定义模板标签来获取 athlete.ids
的列表,然后 built-in json_script
过滤器将这些 id 呈现为 json.
我们假设您的应用名称是 myapp
。如果您还没有任何自定义过滤器,请创建目录 myapp/templatetags/
,并添加一个空的 __init__.py
文件。然后在文件 myapp/templatetags/myapp_filters.py
添加:
from django import template
register = template.Library()
@register.filter
def qs_to_id_list(qs):
return list(qs.values_list('id', flat=True))
在您的模板示例中,您可以:
{% 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 %}
json_script
过滤器将呈现这样的块(在每个 table 行中):
<script id="athletes-data-5" type="application/json">[1, 2, 3]</script>
可以在您的 client-side javascript.
中访问