Django项目中Python字典传入JS后的遍历与HTML生成问题求助

第一步：修正数据序列化方式（核心） #

你当前data-filters属性里的是Python风格字典，并非合法JSON，这会导致JS解析异常——JSON不允许数组（Python元组转成的数组）作为对象键，且语法规则和Python存在差异（比如JSON要求用双引号，Python允许单引号）。

Django端处理方案 #

在Django视图或模板中，先将原字典转换为JS易处理的结构，再序列化为合法JSON：

视图层转换（推荐）

# 视图中处理原始字典
original_dict = {
    ('Region', 'cardinal'): [('EAST', 'EAST'), ('WEST', 'WEST')],
    ('State', 'state'): [('AL', 'AL'), ('AR', 'AR')],
    # 其他键值对
}
# 转换为数组结构：每个元素包含键元组的拆分字段和对应选项列表
filters_data = [
    {"label": key[0], "name": key[1], "options": options}
    for key, options in original_dict.items()
]
# 将filters_data传入模板

模板层输出

<div 
   class="ms-auto py-4" 
   id="PageFilter" 
   data-filters="{{ filters_data|json_script }}"
></div>

这样data-filters中的内容是标准JSON，jQuery的.data()会自动解析为JS对象数组。

第二步：正确遍历数据并生成HTML #

基于处理后的filters数组，以下是完整的JS实现：

// 生成单个过滤器的容器HTML
function createFilterContainer(filterLabel) {
    return `
        <div class="filter-group">
            <h3>${filterLabel}</h3>
            <div class="filter-options"></div>
        </div>
    `;
}

// 生成单个选项的HTML
function createOptionElement(optionText, optionValue) {
    return `<label><input type="checkbox" value="${optionValue}"> ${optionText}</label>`;
}

// 初始化单个过滤器
function initFilter(section, filter) {
    return new Promise((resolve) => {
        // 创建过滤器容器并添加到页面
        const $container = $(createFilterContainer(filter.label));
        $(section).append($container);

        // 批量生成选项并插入容器
        const optionsHTML = filter.options.map(opt => createOptionElement(opt[0], opt[1])).join('');
        $container.find('.filter-options').append(optionsHTML);

        resolve();
    });
}

$(document).ready(function () {
    const $section = $("#PageFilter");
    const filters = $section.data("filters");

    // 并行处理所有过滤器初始化
    Promise.all(filters.map(filter => initFilter($section, filter)))
        .then(() => console.log("所有过滤器加载完成"));
});

特殊情况：保留原字典结构不转换 #

如果无法修改Django端数据结构，需要在JS中解析字符串形式的元组键：

$(document).ready(function () {
    const $section = $("#PageFilter");
    const filters = $section.data("filters");

    // 遍历原始解析后的对象
    for (const [keyStr, options] of Object.entries(filters)) {
        // 解析字符串形式的元组，拆分出键的两个元素
        const key = keyStr.replace(/[()']/g, '').split(', ');
        const filterLabel = key[0];
        const filterName = key[1];

        // 初始化当前过滤器
        initFilter($section, { label: filterLabel, name: filterName, options });
    }
});

注意事项 #

• 必须确保存入data属性的是合法JSON，避免Python语法与JSON的冲突。
• 用Promise.all处理多个异步初始化操作，避免循环中异步任务的顺序混乱。
• 生成HTML时优先使用模板字符串，若内容包含特殊字符，需手动转义或用jQuery的DOM创建方法避免XSS风险。

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