在 Express/Jade 模板中的 Javascript 函数中访问 JSON 数据时遇到问题答案

【问题标题】：Trouble Accessing JSON Data in a Javascript Function Within an Express/Jade Template在 Express/Jade 模板中的 Javascript 函数中访问 JSON 数据时遇到问题
【发布时间】：2016-07-04 08:19:30
【问题描述】：

我是 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 函数时，我得到一个“未定义的“mydata”的“未捕获的引用错误”。

请问我错过了什么？

【问题讨论】：

我认为您可能混淆了服务器端和客户端 JavaScript。
我不会感到惊讶，但数据似乎可供客户端使用，因为 mydata.sclist 正在每个循环中用于填充选择列表。我不能使用 mydata.sclist[i] 访问单个元素吗？
each 循环是服务器端，script. 中的所有内容都是客户端。
啊，是的，明白了。对不起，我确实很密集。

标签： javascript json node.js express pug

【解决方案1】：

我假设mydata 在渲染页面时被传递给了jade。然后页面作为呈现的 HTML 从服务器返回到客户端（Web 浏览器）。然后您不能访问mydata 变量，因为它仅在服务器端用于呈现页面。（选择在服务端呈现）

为了能够以您想要的方式访问数据，除了上面的代码之外，您还必须渲染 javascript 变量，然后可以在客户端使用该变量。 (when select is changed)

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

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

【讨论】：

太棒了！我已经解决了一个变通办法，但这种方式要优雅得多。谢谢！