如何正确传递EJS数组至Bootstrap模态框并完成解析？

问题根源 #

你当前的写法存在两个核心问题：

1. 未给data-reason属性值添加引号，EJS输出的数组会被转为逗号分隔的字符串（比如My,Name,is,XYZ），浏览器解析时会截断属性值，导致jQuery无法获取完整的数组字符串。
2. 直接输出数组无法让jQuery自动识别为数组类型，最终得到的是字符串，遍历自然会逐个输出字符。

正确实现步骤 #

1. 修正EJS模板的属性传递逻辑

用JSON.stringify()将EJS数组转为标准JSON字符串，并用引号包裹属性值（避免HTML解析冲突）：

<td colspan="1" align="left" class="openModal" data-toggle="modal" data-target="#exampleModal" 
    data-reason='<%= JSON.stringify(systemp[i].REASON) %>' > click here </td>

这里用单引号包裹属性值，是因为JSON字符串内部使用双引号，可避免语法冲突。如果偏好双引号包裹属性，可改用<%- %>（不转义HTML字符）：

<td colspan="1" align="left" class="openModal" data-toggle="modal" data-target="#exampleModal" 
    data-reason="<%- JSON.stringify(systemp[i].REASON) %>" > click here </td>

2. 简化jQuery中的数组处理

jQuery的.data()方法会自动识别JSON格式的字符串并解析为数组，直接遍历即可：

$('.openModal').click(function(){
    var reason = $(this).data('reason');
    // 遍历数组元素并打印
    reason.forEach(item => console.log(item));
    // 也可以用for循环实现
    // for(let i = 0; i < reason.length; i++){
    //     console.log(reason[i]);
    // }
})

为什么之前的split会报错 #

错误的属性传递方式导致reason不是有效的字符串（可能被浏览器截断为单个单词，甚至在某些场景下被解析为其他类型），因此调用split()时会提示“不是函数”。通过JSON序列化传递后，reason会被正确解析为数组，无需再用split处理。

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