解决EJS模板中Mapbox无法运行的JSON数据传递问题_技术教程

本文旨在解决在ejs模板中集成mapbox时，因json数据传递不当导致的“cannot read properties of undefined”错误。核心问题在于将json字符串错误地作为javascript字符串字面量嵌入，而非直接作为可解析的javascript对象。通过采用ejs的非转义输出标签``，可以直接将json字符串注入为有效的javascript对象，从而使mapbox能够正确访问数据并初始化地图。

EJS模板中Mapbox集成的数据传递陷阱与解决方案

在Web开发中，将后端数据动态地传递给前端JavaScript库进行渲染是常见需求。然而，在使用EJS（Embedded JavaScript）模板引擎与Mapbox等客户端JavaScript库集成时，如果数据传递方式不当，很容易遇到诸如“Cannot read properties of undefined”之类的错误。本文将深入探讨这一问题，并提供一个清晰的解决方案。

问题描述：Mapbox无法访问EJS中传递的JSON数据

当尝试在EJS模板中嵌入Mapbox地图，并使用后端传递的营地（campground）数据来定位地图中心和标记时，可能会遇到以下错误：

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

这个错误表明在showPageMap.js文件中，尝试访问campground.geometry.coordinates时，campground对象或其geometry属性是undefined，导致无法读取coordinates。

错误的EJS数据嵌入方式

通常，为了将服务器端的JavaScript对象传递到客户端，我们会使用JSON.stringify()将其转换为JSON字符串，然后在EJS模板中嵌入。一个常见的错误做法是将其用引号包裹，如下所示：

show.ejs (错误示例):

在上述代码中，const campground = ''; 这行代码的本意是想将campground对象转换为JSON字符串，然后让JavaScript将其解析为一个对象。然而，由于外部的单引号或双引号，EJS渲染后，campground变量实际上被赋值为一个JavaScript字符串字面量，其内容是JSON字符串本身。

例如，如果campground对象是{"geometry":{"type":"Point","coordinates":[8.520355,47.476804]}}，那么渲染后的HTML会是：

此时，在showPageMap.js中，campground变量被视为一个普通的字符串，而不是一个JavaScript对象。因此，当尝试访问campground.geometry时，会因为字符串没有geometry属性而返回undefined，进而导致undefined.coordinates的错误。

showPageMap.js:

mapboxgl.accessToken = mapToken;
const map = new mapboxgl.Map({
    container: 'map', // 容器ID
    style: 'mapbox://styles/mapbox/streets-v12', // 样式URL
    center: campground.geometry.coordinates, // 错误发生在这里，因为campground是字符串
    zoom: 8, // 初始缩放级别
});

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

解决方案：使用EJS的非转义输出标签

解决这个问题的关键在于正确地将JSON字符串注入到JavaScript代码中，使其能够被JavaScript引擎解析为对象，而不是字符串字面量。EJS提供了两种输出标签：

: 转义HTML特殊字符后输出内容。适用于显示文本内容，防止XSS攻击。
: 不转义HTML特殊字符直接输出内容。适用于输出HTML片段或JSON字符串等需要保留原始格式的内容。

为了将JSON.stringify(campground)的输出直接作为JavaScript代码的一部分，我们需要使用非转义输出标签 。

show.ejs (正确示例):

当使用时，EJS会直接将JSON.stringify(campground)的结果（一个有效的JSON字符串）输出到const campground =的后面，而不会额外添加引号。

渲染后的HTML将是：

此时，campground变量在客户端JavaScript中将是一个真正的JavaScript对象，拥有geometry属性和其内部的coordinates数组。showPageMap.js就可以正确地访问这些属性，Mapbox也能正常初始化。

完整代码示例

show.ejs:




    
    
    Campground Detail
    
    
    


    <%= campground.title %>
    <%= campground.description %>

showPageMap.js:

// 确保Mapbox GL JS库已加载
if (typeof mapboxgl === 'undefined') {
    console.error('Mapbox GL JS library not loaded.');
} else {
    mapboxgl.accessToken = mapToken; // 使用EJS中定义的mapToken

    const map = new mapboxgl.Map({
        container: 'map', // 地图容器的ID
        style: 'mapbox://styles/mapbox/streets-v12', // Mapbox样式URL
        center: campground.geometry.coordinates, // 使用campground对象的坐标
        zoom: 8 // 初始缩放级别
    });

    // 添加地图导航控件
    map.addControl(new mapboxgl.NavigationControl());

    // 在地图上添加标记
    new mapboxgl.Marker()
        .setLngLat(campground.geometry.coordinates)
        .setPopup(
            new mapboxgl.Popup({ offset: 25 })
                .setHTML(`${campground.title}
${campground.location}`)
        )
        .addTo(map);
}

注意事项与最佳实践

理解EJS标签的区别： 务必区分和。当需要将服务器端变量作为原始JavaScript、HTML或JSON内容嵌入时，使用。当输出用户输入或其他可能包含恶意HTML的文本时，使用以防止XSS攻击。
数据安全性： 虽然JSON.stringify()本身会转义字符串中的特殊字符，但当嵌入到HTML中时，如果campground对象中包含可能被解释为HTML标签或脚本的内容（例如，在title或description中），仍需小心。对于显示在HTML元素中的文本，最好始终使用。对于嵌入到JavaScript变量中的JSON，JSON.stringify()通常是安全的。
变量命名冲突： 确保在EJS模板中定义的JavaScript变量名（如mapToken和campground）在全局作用域或外部JavaScript文件中不会引起冲突。使用const或let进行块级作用域声明可以帮助管理变量作用域。
错误处理： 在showPageMap.js中，可以添加一些检查，确保campground对象及其属性确实存在，以提高代码的健壮性。例如：if (campground && campground.geometry && campground.geometry.coordinates)。

总结

在EJS模板中集成Mapbox或其他需要JavaScript对象的客户端库时，正确地将服务器端数据序列化并嵌入至关重要。核心在于理解EJS的非转义输出标签，它允许我们将JSON.stringify()生成的JSON字符串直接作为有效的JavaScript对象字面量注入到脚本中，从而避免因类型不匹配导致的“Cannot read properties of undefined”错误。掌握这一技巧，将使您在前后端数据交互中更加游刃有余。