EJS 中的 while 循环显示在一行上答案

【问题标题】：While loops in EJS display on a single lineEJS 中的 while 循环显示在一行上
【发布时间】：2019-10-24 04:49:25
【问题描述】：

我已将数据渲染到 EJS 中，现在使用 while 循环我想循环浏览该数据并将其显示在一行上。例如，假设数据是具有名称属性的对象数组。我有名字 ['Bob','Chris','Sarah']。在我将数据发送到 EJS 后，我希望 Bob 出现，然后过了一段时间 Bob 消失了，然后 Chris 出现了，然后 Sarah 出现了。

截至目前，我的代码一次将它们全部输出到多行，而不是像我希望的那样一次输出一个。

<body>
    <% var current = 0; %>
    <% while (current < 2){ %>
        <h1> Hey <%= person[current].name %>, how are you doing? </h1>
    <%    current += 1;
    };%>
</body>

输出应该是一行：嘿，当前姓名，你好吗？那么当前名称应该不断变化。

代码输出三行，每个名称一行。有人知道如何解决这个问题吗？谢谢。

【问题讨论】：

我会使用数组方法，例如 forEach/for 循环样式。这样，无论如何它都会遍历循环中的所有项目。
但这会在一行中一次输出一个名称吗？
您也可以添加多行文本输出
您可以点击此链接 - stackoverflow.com/questions/22952044/loop-through-json-in-ejs。谢谢

标签： node.js ejs

【解决方案1】：

我认为您将模板处理（产生静态输出）与 DOM 元素的动态更新混淆了。后者对于前端框架来说是一个更大的问题（尽管您提供的内容在 vanilla JS 中已经足够简单了）。

我会考虑创建一个带有名称占位符的模板，然后使用计时器来更新里面的文本：

setInterval(3000, function(){
    var span = document.getElementById('name-span');
    if ('textContent' in span) {
        span.textContent = person[current].name;
    } else {
        span.innerText = person[current].name;
    }
    current = (current + 1) % person.length;
}

当然，您需要找到一种更好的方式来访问 person 和 current 而不是使用全局变量。

【讨论】：

谢谢！这很有帮助。