前端function categoryDetails回调中使用模板语法访问data.result提示'data'未定义的问题求助

嘿，我一眼就看出问题出在哪了——你把服务器端模板引擎语法和前端JavaScript逻辑混在一起用啦！

为什么会报错？ #

你的{% for i in data.result %}和{{ i.label }}是服务器端模板（比如Django的Jinja2、Flask模板）的语法，这些代码是在服务器把页面发送给浏览器之前就完成渲染的。但你现在是在前端的done回调里动态生成HTML字符串，这时候服务器早就完成页面渲染了，模板引擎根本不会再处理这段字符串；而且服务器在最初渲染页面的时候，也完全不知道你前端JS里的data变量，所以才会报'data' is undefined的错误。

正确的解决方法 #

既然是前端动态生成HTML，就得用JavaScript的循环逻辑来遍历data.result，手动拼接（或创建）DOM元素。下面给你两种可行的写法：

写法1：字符串拼接（简单直接）

function categoryDetails(catId, code, label) { 
    alert('Inside Categories Detail') 
    $.post("/product/categories", { catId: catId, code: code, label: label, sess: socket.id }).done(function(data) { 
        alert("Inside product capacity" + data.result) 
        console.log(data.result) 
        // 初始化HTML开头部分
        let botHtml = '<div class="nn-bot-bubble"><div class="nn-bot-chips">';
        // 用JS的forEach遍历数据，拼接每个按钮
        data.result.forEach(function(item) {
            // 用模板字符串插入变量，可读性更好
            botHtml += `<button id="sel_btn" value="${item.label}"> ${item.label} </button>`;
        });
        // 补充HTML结尾部分
        botHtml += '</div></div>';
        $(".chat_block").append(botHtml); 
    }); 
}

写法2：创建DOM元素（更安全，推荐）

如果item.label包含特殊字符（比如引号），字符串拼接容易出现HTML语法错误，甚至有XSS风险，推荐用jQuery直接创建DOM元素：

function categoryDetails(catId, code, label) { 
    alert('Inside Categories Detail') 
    $.post("/product/categories", { catId: catId, code: code, label: label, sess: socket.id }).done(function(data) { 
        alert("Inside product capacity" + data.result) 
        console.log(data.result) 
        // 创建外层容器
        const botBubble = $('<div class="nn-bot-bubble"><div class="nn-bot-chips"></div></div>');
        const chipsContainer = botBubble.find('.nn-bot-chips');
        // 遍历数据，逐个创建按钮并添加到容器
        data.result.forEach(function(item) {
            const btn = $('<button>')
                .attr('id', 'sel_btn')
                .attr('value', item.label)
                .text(item.label);
            chipsContainer.append(btn);
        });
        // 将整个容器添加到页面
        $(".chat_block").append(botBubble); 
    }); 
}

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