如何用JS数组填充HTML datalist？EJS渲染城市数据失败求助

嘿，我帮你排查下这个问题，看你的代码片段里有几个明显的小问题，咱们一步步来修正：

问题1：循环变量混乱 #

你的for循环里初始化了j，但循环增量写的是i++，这会导致循环根本跑不起来，直接改成j++才行。

问题2：EJS数据输出方式错误 #

直接用<%= adr %>输出数组的话，EJS会把它转成字符串形式（比如[object Object],[object Object]），前端JS没法正确解析成数组。你得用<%- JSON.stringify(adr) %>把数据转成JSON字符串，这样JS才能拿到可用的数组。

问题3：未生成datalist的<option>元素 #

你定义了mycars数组，但没把这些数据转换成<option>插入到datalist里，这也是datalist没内容的核心原因之一。

修正后的完整代码示例 #

<input name="city" list="anrede" /> 
<datalist id="anrede"></datalist> 

<script type="text/javascript">
// 正确获取后端传递的城市数据
const cities = <%- JSON.stringify(adr) %>;
const datalist = document.getElementById('anrede');

// 循环生成option元素并插入datalist
cities.forEach(city => {
  const option = document.createElement('option');
  option.value = city.plz; // 这里假设你的城市字段是plz，根据实际字段名调整
  datalist.appendChild(option);
});
</script>

额外排查点 #

• 先确认后端传递的adr数据是否正确：可以在EJS里加一行<% console.log(adr) %>，然后看服务器控制台有没有输出正确的城市数组。
• 确保后端res.render时正确传递了参数，比如：

  // 后端Node.js示例（假设用Express）
  app.get('/test', async (req, res) => {
    const adr = await 你的数据库查询函数(); // 比如从数据库获取城市列表
    res.render('test', { adr }); // 这里要确保变量名是adr，和EJS里的一致
  });
  

这样调整后，应该就能正常把城市数据填充到datalist里啦！

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