javascript - 在 Express/Jade 模板内的 Javascript 函数中访问 JSON 数据时出现问题

Question

我是 Express/Jade 的新人，所以如果这是一个愚蠢的问题，我深表歉意。

我正在将 JSON 数据传递到 Jade 模板中，但是，尽管数据确实存在并且可以在页面上的其他位置使用，但我似乎无法在同一页面内的 Javascript 函数中访问它。

有问题的代码如下所示:

script.
    function populateData(value){
        console.log("Value = " + value);
        for(i = 0;i <= 3;i++){
            console.log("i = " + i);
            if(value==i){
                console.log("school = " + mydata.sclist[i].sName);
                $('#input_sid').val(mydata.sclist[i].sID);
                $('#input_spc').val(mydata.sclist[i].sPostcode);
            }
        }
    }
form#form_add_booking(name="addbooking",method="post",action="/addbooking")
    table.formtable
        tr
            td
                span
                    b School Name
            td
                select#input_sname(name="sname" onChange="populateData(this.value)")
                    option.
                        ======    select    ======
                    each school, i in mydata.sclist
                        option(value=i).
                            #{school.sName}

因此，在上面的代码中，SELECT 列表正确填充了 JSON 中的学校名称，但是，当 onChange 属性触发 Javascript 函数时，我收到“ Uncaught ReferenceError ”，即“mydata”未定义。

请问我缺少什么？

Answer 1

我假设mydata在渲染页面时传递给jade。然后，页面以呈现的 HTML 形式从服务器返回到客户端(Web 浏览器)。然后您无法访问 mydata 变量，因为它仅在服务器端用于呈现页面。 (选择在服务端呈现)

为了能够按照您想要的方式访问数据，除了上面的代码之外，您还必须呈现 javascript 变量，然后可以在客户端使用该变量。 (当选择更改时)

const clientSideData = !{(JSON.stringify(mydata))};

将其放置在 populateData 的最顶部(它将 JSON 对象转换为字符串)，然后用 clientSideData 替换函数中的 mydata 引用。通过这种方式，您甚至可以从客户端访问数据，因为您将呈现 javascript 变量。