无法在Express / Jade模板中访问Javascript函数中的JSON数据

时间:2016-07-04 08:19:31

标签: javascript json node.js express pug

我是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'未定义。

我错过了什么?

1 个答案:

答案 0 :(得分:1)

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

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

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

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