如何在Javascript中获取Django传递的列表并转为数组类型

你当前的写法是直接把Django渲染输出的Python列表字符串用引号包裹赋值给JS变量，得到的自然是字符串类型，Array.isArray()检测肯定返回false。

方法1：使用Django内置json_script模板标签（最推荐，自动处理转义风险） #

无需修改后端视图代码，仅调整前端模板即可：

1. 首先在模板的HTML部分插入Django模板标签，会自动生成一个隐藏的script标签存储数据：

{% json_script "mergedCompare_data" mergedCompare %}

2. JS中读取该标签内容转成数组即可：

const assignedDevices = JSON.parse(document.getElementById('mergedCompare_data').textContent);
console.log(Array.isArray(assignedDevices)) // 输出 true

方法2：后端提前序列化JSON #

修改view.py代码，先把列表序列化为JSON字符串再传递：

import json

mergedCompare = [item_listAssigned[f'subject{i}'] + ': ' + item_listAssigned[f'serial{i}'] for i in range(1, len(item_listAssigned) // 2 + 1)]
context = {
    # 提前序列化为JSON字符串
    'mergedCompare': json.dumps(mergedCompare)
}

前端JS直接赋值即可，不要加引号：

var assignedDevices = {{ mergedCompare|safe }};
console.log(Array.isArray(assignedDevices)) // 输出 true

方法3：前端直接转换现有字符串（不推荐，仅临时应急用） #

如果不想修改后端代码，可在前端把Python格式的列表字符串转成JS数组：

var assignedDevicesStr = "{{mergedCompare|safe}}"
// 把单引号替换为双引号后用JSON.parse转换
const list = JSON.parse(assignedDevicesStr.replace(/'/g, '"'));
console.log(Array.isArray(list)) // 输出 true

注意：该方法如果列表元素本身包含单引号会转换失败，仅适用于确定元素没有单引号的场景。

内容的提问来源于stack exchange，提问作者WEI ZHUANG GOH