PostgreSQL数组转Session变量后JS渲染出现多余逗号问题排查

为啥会出现多余逗号？ #

你直接把数组liste_modules用"${liste_modules}"插入页面时，JS会自动把数组转成字符串——数组转字符串默认用逗号分隔每个元素，所以就出现了多余的逗号。比如["<div...>", "<div...>"]转字符串后变成"<div...>,<div...>"，插入页面自然就显示逗号了。

怎么解决？ #

第一步：先把Session里的数组弄成标准JS格式 #

PostgreSQL返回的{1,2,3}是它自己的数组格式，得在后端转成JS能直接识别的数组：

• 要是用Python后端：把"{1,2,3}"处理成[1,2,3]，比如写个小逻辑：list(map(int, arr_str.strip('{}').split(',')))，存进Session后，前端拿到的就是正经数组。
• 要是用PHP后端：解析字符串转成PHP数组，再用json_encode()输出给前端，前端直接就能用。
  别存那种字符串形式的['1','2','3']，前端会把它当成一整个字符串，不是数组。

第二步：改前端循环插入的代码 #

不管Session最终给的是什么，循环完插入HTML时，别直接用数组转字符串，用join('')把数组元素拼起来（空字符串分隔，就没逗号了）：

var liste_modules = [];
for (i=0; i<sess_modules.length; i++) {
    var module = `<div class="leaflet-sidebar-pane" id="module_${i+1}"></div>`;
    liste_modules.push(module);
}
// 循环完再统一插入，别每次循环都改DOM
$("#mydiv").html(liste_modules.join(''));

另外你原来把$("#mydiv").html()写在循环里，每次循环都会覆盖之前的内容，还浪费性能，移到循环外面才对。

额外情况处理 #

要是你的sess_modules是字符串形式的['1','2','3']，得先转成真正的JS数组：把单引号换成双引号（JSON只认双引号），再用JSON.parse()解析：

var realArray = JSON.parse(sess_modules.replace(/'/g, '"'));

之后再用上面的循环逻辑就行。

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