NodeJS/Express/EJS场景下渲染的JSON数组在JS中长度获取异常问题

问题根源 #

1. 前端JS获取EJS后端数组的方式错误
   你写的var newArr = "<%- arr%>";实际是把数组转成了逗号拼接的字符串，newArr.length获取的是这个字符串的字符总长度，不是原数组的元素个数，所以才会出现循环几十次的问题。
2. 回调注册逻辑位置错误
   你把$(document).ready()放在for循环内部，相当于重复注册了N次DOM加载完成的回调，就算数组长度正确，也会导致重复执行setData。

修复方案 #

第一步修改数组赋值逻辑，用JSON.stringify将EJS数组直接序列化为前端可识别的JS数组：

// 不要给<%- %>套额外双引号，JSON.stringify输出的内容本身就是合法的JS字面量
var newArr = <%- JSON.stringify(arr) %>;

第二步调整循环和DOM加载回调的嵌套关系，把循环放到ready回调内部：

<script>
var newArr = <%- JSON.stringify(arr) %>;

$(document).ready(function() {
  // 此时newArr.length就是原数组的元素个数，循环次数和EJS端一致
  for(var i=0; i< newArr.length; i++){ 
    setData();
  }
});

function setData(){
  var box = document.getElementById('list-box');
  const para = document.createElement('p');
  para.innerHTML = `<input type="button" value="Test">`
  box.appendChild(para);
}
</script>

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