无法将 EJS 变量推送到 html scripttag 中的数组中？

Posted 2023-03-08

【中文标题】无法将 EJS 变量推送到 html scripttag 中的数组中？

【英文标题】：can't push EJS variable into array in html scripttag?

【发布时间】：2018-03-31 12:38:06

【问题描述】：

我正在尝试构建一个包含一些测试坐标的数组，以便与 OpenLayers 叠加层一起使用。

这是代码：

var parada = [];

for(var i = 0; i < <%- coords.length%>; i++) //First loop to fill the array

    var arr = [<%- coords[i].lon %>, <%- coords[i].lat %>]; //THIS IS THE ERROR LINE! ... says the console...
    parada.push(arr);

 

var overlays = [];

for (i = 0; i < parada.lenght; i++)  //Second loop to build the overlays
    overlays.push(new ol.Overlay(
        position: ol.proj.fromLonLat([parada[i][0], parada[i][1]]), //With the data of the array above
        positioning: 'center-center',
        element: document.getElementById('parada' + i),
        stopEvent: false
    ));



for (i = 0; i<overlays.length; i++) // Last loop to assign the overlays.
    map.addOverlay(overlays[i]);

重要提示：在我的 app.js 文件中，坐标被定义为一个对象数组（我在 mongodb 中找到（））。

我真的被困在这里，请帮忙！ 谢谢！ :DDD

【参考方案1】：

您的变量i 存在于客户端 JS 中，而不存在于服务器端 JS 中。

有很多方法可以解决这个问题，其中之一是：

var parada = <%- JSON.stringify(coords.map(function(pair) 
    return [pair.lon, pair.lat];
)) %>;

我假设lon 和lat 总是数字，这样就不存在注入攻击的风险。

或者，您可以在调用模板之前进行转换，避免模板本身的复杂性。

顺便说一句，您在lenght 中也有一个错字。

【讨论】：

谢谢！它似乎工作:) 我把你的代码放在 app.js 文件中，就像你说的那样。还有一件事：我现在如何在 EJS 中调用变量？ ? 或 似乎都不起作用...非常感谢您的帮助！你太棒了：D

@AlanSchwarz 变量parada 只存在于客户端 JS 中，不存在于服务器端 JS 中。 <% %> 内部的代码与外部的代码完全分开，两者都使用 javascript 只是巧合。从 EJS 的角度来看，只有 <% %> 内的代码被解释为代码，外面的位只是要喷出的任意文本。然后将模板生成的文本发送到浏览器（您可以在开发工具中看到它），然后浏览器运行生成的代码。这两个是完全独立的过程。

【参考方案2】：

进行了更改，以便更轻松地在客户端处理数据。

var lon = [];
    var lat = [];
    for (var i = 0; i < <%=lon.length%>; i++ ) <%for(var x = 0; x < lon.length ;x++)  %> 
        lon.push(<%= lon[x] %>);
        lat.push(<%= lat[x] %>);
    <%  %>

这样我在客户端用 EJS 构建了一个数组。

//Create the Overlays Array
    var overlays = [];

    for (var i = 0; i < <%=lon.length%>; i++ ) 
        overlays.push(new ol.Overlay(
            position: ol.proj.fromLonLat([lon[i], lat[i] ]),
            positioning: 'center-center',
            element: document.getElementById('parada' + i),
            stopEvent: false
        ));
    

然后我可以在任何需要的地方简单地使用这个数组。

感谢@skirtle 的帮助，你让我理解了这个问题；）