javascript - 访问EJS内部的变量

Question

我想使用从 map.js 传递到 map.ejs 的对象。在我的请求中，我获取对象:

module.exports = async function(req, res) {
    var myObjects = await new Promise(resolve => {
        // resolve with objects
    });

    res.view('pages/map/home', {
        myObjects
    })
};

如何访问 .ejs 文件中的对象？我想循环遍历它们以将它们添加到 map 上，但是，这不会打印任何内容。它实际上会在页面上创建错误。 map.ejs 的一部分

<div id="mapid"></div>
<script>
// set up map
var mymap = L.map('mapid').setView([45.4735629, 9.1771209], 13);
// ...
// add markers on map using fetched objects
var myObjects = <%- myObjects %>
myObjects.forEach(f => {
    var marker = L.marker([f.latitude, f.longitude]).addTo(mymap); 
}
</script>

我在 .ejs 中的 myObjects 上收到意外标识符。关于我做错了什么的任何提示吗？

Answer 1

留下map路由来渲染 View map.ejs
这会将 HTML 发送到客户端。

因此您查看的路线可能如下所示:

router.get('/', (req, res) => {
    res.send('home', {})
});

添加返回 map 点的路线，例如[站点]/maps/getMapPoints/:位置

从该路由只需使用 JSON 进行响应。

这是一个 API 路由的示例

/* GET home page. */
router.get('/', (req, res) => {
  geoLocate(req.ip).then(json => {
    res.json(json);
  }).catch(err => console.log(err));
});

现在，在您 map.ejs 渲染的客户端 HTML 中，您将需要使用它。我们将使用这个REST Test Site

// When the DOM has loaded.
document.addEventListener('DOMContentLoaded', () => {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => res.json())
  .then(json => {
    // Lets build out the HTML
    document.querySelector('.container').innerHTML = `
      <div id="${json.id}"><h3>${json.title} - ${(json.completed) ? 'Complete' : 'Pending'}</h3></div>
    `;
  });
});

<div class="container">

</div>

最后这是一个分离的工作示例:Sample Site