Django视图传递到HTML的列表数据如何传给同页面JavaScript使用

问题原因 #

你直接将Django ORM模型对象列表传入模板时，Django会自动调用对象的__str__方法将其转换为字符串输出，同时默认开启HTML转义，因此你拿到的是[<Load: Load object (1)>]这种转义后的字符串，无法直接作为JS数组操作。

步骤1：修改视图层，将模型列表序列化为JSON格式 #

你需要先在视图层把要传给JS的列表数据序列化为合法的JSON字符串，两种常用实现方式：

方式A：手动构造字典列表（更灵活，推荐） #

import json

def index(request):
    # 原有逻辑不变
    body=list(Body.objects.all())
    loads=list(Load.objects.all().order_by('length'))
    badLoads=[]
    goodLoads=[]
    for load in loads:
        if load.length>body[0].length or load.width>body[0].width or load.mass>body[0].mass:
            badLoads.append(load)
        else:
            goodLoads.append(load)

    goodLoadsLength=len(goodLoads)
    # 新增：手动转模型列表为字典列表，再序列化为JSON字符串
    good_loads_list = [
        {
            "id": load.id,
            "length": load.length,
            "width": load.width,
            "height": load.height,
            "mass": load.mass
        } for load in goodLoads
    ]
    bad_loads_list = [
        {
            "id": load.id,
            "length": load.length,
            "width": load.width,
            "height": load.height,
            "mass": load.mass
        } for load in badLoads
    ]
    good_loads_json = json.dumps(good_loads_list)
    bad_loads_json = json.dumps(bad_loads_list)

    context={
        'body':body[0],
        'loads':loads,
        'badLoads':badLoads,
        'goodLoads':goodLoads,
        'goodLoadsLength':goodLoadsLength,
        # 新增序列化后的JSON字段传入上下文
        'good_loads_json': good_loads_json,
        'bad_loads_json': bad_loads_json,
    }
    return render(request,'index.html',context)

方式B：使用Django内置序列化器（代码更简洁） #

from django.core import serializers

def index(request):
    # 原有逻辑不变
    # ...省略重复代码...
    # 新增：直接用序列化器转模型列表为JSON，fields指定需要导出的字段
    good_loads_json = serializers.serialize('json', goodLoads, fields=('id','length','width','height','mass'))
    bad_loads_json = serializers.serialize('json', badLoads, fields=('id','length','width','height','mass'))
    # 上下文传入逻辑同上

步骤2：修改模板JS取值逻辑 #

在模板的script标签中，使用safe过滤器关闭Django的自动HTML转义，直接将JSON字符串转为JS对象：

<script>
// 数字类型不需要加引号
const loadsLength = {{goodLoadsLength}};
// 直接赋值即可，JSON本身是合法的JS对象字面量
const goodLoads = {{ good_loads_json|safe }};
const badLoads = {{ bad_loads_json|safe }};
</script>

效果验证 #

拿到JS数组后就可以正常遍历操作了：

// 手动序列化（方式A）的取值方式
goodLoads.forEach(load => {
    console.log('货物ID：', load.id, '货物长度：', load.length)
})

// 内置序列化器（方式B）的取值方式，字段都存在fields属性下
goodLoads.forEach(load => {
    console.log('货物ID：', load.pk, '货物长度：', load.fields.length)
})

内容的提问来源于stack exchange，提问作者bugthefifth