JavaScript获取列表长度异常：返回字符串长度而非元素数量求助

问题原因 #

直接将Django的QuerySet通过{{ genres }}插入到input的value中时，Django会把QuerySet转换为它的字符串形式（比如<QuerySet [<Genre: Romance>, ...]>），所以JavaScript获取到的是一个普通字符串，length属性返回的自然是字符串的字符总数，而非列表元素数量。

解决方案 #

核心思路是把Query序列化为JSON格式，让JavaScript能直接解析成数组。

步骤1：后端将QuerySet转为JSON可序列化的结构 #

在Django视图中，把QuerySet转换为列表（比如提取需要的字段），再序列化为JSON字符串：

import json
from django.shortcuts import render
from .models import Genre

def your_view(request):
    # 获取所有Genre对象
    genres = Genre.objects.all()
    # 提取名称字段，转为普通列表
    genre_names = list(genres.values_list('name', flat=True))
    # 序列化为JSON字符串
    genres_json = json.dumps(genre_names)
    # 传入模板上下文
    return render(request, 'your_template.html', {'genres_json': genres_json})

步骤2：前端传递JSON数据 #

有两种常用方式：

• 方式一：通过隐藏input传递

  <input type="hidden" id="genres_get" value="{{ genres_json }}">
  

• 方式二：直接在script中定义变量（更便捷）

  <script>
    // 使用|safe过滤器避免Django转义JSON字符
    const genres = {{ genres_json|safe }};
  </script>
  

步骤3：JavaScript中获取并使用数组 #

如果用input方式，需要先解析JSON：

const genresStr = document.getElementById('genres_get').value;
const genres = JSON.parse(genresStr);
console.log(genres.length); // 此时会输出预期的20

如果用script变量方式，直接调用即可：

console.log(genres.length); // 直接输出20

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