无法在脚本内的EJS模板中访问JSON

Question

我正在尝试构建基于从节点传递到客户端的JSON呈现动态图表的webapp。

但是我无法访问里面的json变量。我已经使用

测试了JSON对象

console.log(<%= data %>)

它出现在这里。

我的节点代码如下：

let ltlasJSON = JSON.parse(ltlasData);

app.get("/results", function(req, res){
    var query = req.query.postalCode;
    var url = "http://api.postcodes.io/postcodes/" + query;

    request(url, function(error, response, body){
        if(!error && response.statusCode == 200){
            var data = JSON.parse(body);
            var adminDistrict = data["result"]["codes"]["admin_district"];
            var filtered = ltlasJSON.filter(a=>a.areaCode==adminDistrict);
            res.render("results", {data: filtered});
        }
    }
    );    
});

results.ejs：

<<!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js">
    <!--<![endif]-->

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Engliand Covid-19 </title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <!-- Plotly.js -->
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    </head>

    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->


    <h1>Results Page</h1>


    <script>
    var specimenDate = <%= data.areaCode %>
    var cases = <%= data.dailyLabConfirmedCases %>
    var data1 = [
            {
                x: specimenDate,
                y: cases,
                type: 'bar'
            }
        ];
        Plotly.newPlot('myDiv', data);
    </script>
</body>

</html>

我是Node和ejs的新手。最终目标是在plotly对象的x和y变量中传递JSON数组（两个字段）。

Answer 1

我在这里看到两个问题：

1）您将数据错误地传递到了前端javascript。 <%=总是错误的，因为它编码HTML实体，但是我们在JS脚本标签中，而不是常规HTML中。相反，您想使用JSON.stringify将其作为JSON传递，并使用<%-防止HTML编码：

var specimenDate = <%- JSON.stringify(data.areaCode) %>

尽管这仍然有两个问题：首先，JSON.stringify(undefined)将产生undefined（而不是字符串），在<%-之后将成为空输出，因此，如果该值未定义，则将出现语法错误。其次，包含</script>的字符串将转义脚本块并造成严重破坏。我建议使用devalue之类的东西代替devalue。

2）您正在访问JSON.stringify，但我看到data.areaCode实际上来自data，并且filtered是filtered调用的结果，该调用返回所有匹配项的一个数组元素。但是，您正在访问Array.prototype.filter属性，就好像areaCode直接是匹配元素之一，而不是所有匹配元素的数组一样。

如果要在此处有一个数组，则必须循环访问其条目，或直接访问一个条目，例如data（但还必须确保data[0].areaCode始终存在）。

如果这不是故意的，那么您使用了错误的数组方法。您可以使用data[0]返回第一个匹配项，否则可以使用Array.prototype.find。

示例：

undefined

无法在脚本内的EJS模板中访问JSON

问题描述投票：1回答：1

1个回答

最新问题

无法在脚本内的EJS模板中访问JSON

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1