在EJS模板中使用Mapbox报错：无法读取coordinates属性求助

问题重现 #

我完全按照Colt的教程编写代码，尝试用Mapbox包展示特定营地的位置，但运行时报错。

代码实现 #

1. show.ejs 文件代码

<script>
    const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
    const campground = '<%- JSON.stringify(campground) %>';
</script>

2. showPageMap.js 文件代码

mapboxgl.accessToken = mapToken;
const map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v12', // style URL
    center: campground.geometry.coordinates, // starting position [lng, lat]
    zoom: 8, // starting zoom
});

new mapboxgl.Marker()
    .setLngLat(campground.geometry.coordinates)
    .addTo(map)

报错信息 #

Uncaught TypeError: Cannot read properties of undefined (reading 'coordinates')
at showPageMap.js:5:33

前端渲染后的代码 #

<script>
const mapToken = 'TOKEN';
const campground = '{"geometry":{"type":"Point","coordinates":[8.520355,47.476804]},"_id":"648c26c9e3f99b64ff16c197","title":"Oberglatt Camp","price":100,"description":"Gut gut gut","location":"Oberglatt, Switzerland","reviews":[],"images":[],"author":{"_id":"64835051f0aef1d3a60306ef","email":"tim@gmail.com","username":"tim","__v":0},"__v":0}';
</script>

解决方案 #

问题根源是campground变量被渲染成了JSON字符串，而非JavaScript对象，导致无法直接通过.语法访问属性。

修改show.ejs中的代码，移除JSON.stringify结果外层的单引号，让它直接解析为JS对象：

<script>
    const mapToken = '<%=process.env.MAPBOX_TOKEN%>';
    const campground = <%- JSON.stringify(campground) %>;
</script>

修改后，前端渲染的代码会变成：

<script>
const mapToken = 'TOKEN';
const campground = {"geometry":{"type":"Point","coordinates":[8.520355,47.476804]},"_id":"648c26c9e3f99b64ff16c197","title":"Oberglatt Camp","price":100,"description":"Gut gut gut","location":"Oberglatt, Switzerland","reviews":[],"images":[],"author":{"_id":"64835051f0aef1d3a60306ef","email":"tim@gmail.com","username":"tim","__v":0},"__v":0};
</script>

此时campground是标准的JS对象，showPageMap.js中的代码就能正常访问campground.geometry.coordinates，Mapbox地图也能正确加载营地位置。

内容的提问来源于stack exchange，提问作者Kirill