如何在EJS模板中通过循环展示多个域名查询结果？

问题背景 #

开发的域名年龄查询工具中，Node.js API可获取多个域名的查询结果，但EJS模板仅显示第一个结果，尝试用for循环实现多结果展示未成功。

原代码片段 #

EJS模板代码 #

<div class="container">
      <h1 class="text-center">Domain Age Checker</h1>
      <form action="/domainagechecker" method="post">
        <div class="form-group">
          <label for="domain">Domain URL:</label>
          <textarea
            class="form-control"
            type="text"
            name="domain"
            id=""
            placeholder="write a domain"
          ></textarea>
        </div>
        <br />
        <div class="form-group">
          <button class="btn btn-block btn-primary">Get Details</button>
        </div>
      </form>
      <br />

      <%if (flag) { %>

      <table class="table table-striped">
        <thead>
          <tr>
            <th>Domain Name</th>
            <th>Running Server</th>
            <th>Creation Date</th>
            <th>Domain Age</th>
            <th>Last Renewal</th>
            <th>Expiry Date</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><%=data.domainName%></td>
            <td><%=data.registrar%></td>
            <td><%=date%></td>
            <td><%=domainAge%></td>
            <td><%=data.updatedDate%></td>
            <td><%=data.registryExpiryDate%></td>
          </tr>
        </tbody>
      </table>
   <% } %>
</div>

Node.js接口代码 #

app.set('view engine', 'ejs');

app.get("/", (req,res) => {
    res.render("domainagechecker", {
      title: "Domain Details",
      data: "",
      flag: false,
      date: "",
      domainAge: "",
    });
})

app.post("/domainagechecker", async (req, res) => {
  var domain = req.body.domain;
  console.log(domain);

  var list_Domains = domain.split(" ");

  for (let i = 0; i < list_Domains.length; i++) {
    console.log("sl.no " + i + " " + list_Domains[i]);

    if (isValidDomain(list_Domains[i])) {
      var result = await whoisinfo(list_Domains[i]);
      console.log(result);

      var date = moment(result.creationDate).format("YYYY-MM-DD");
      var curDate = moment(new Date()).format("YYYY-MM-DD");

      console.log("creation date: " + date);
      console.log(curDate);

      var a = moment(date);
      var b = moment(curDate);
      console.log(a);
      console.log(b);

      var years = b.diff(a, "years");
      a.add(years, "years");

      var months = b.diff(a, "months");
      a.add(months, "months");

      var days = b.diff(a, "days");

      var domainAge =
        years + " years " + months + " months and " + days + " days";

      res.render("domainagechecker", {
        title: "Domain Details",
        data: result,
        flag: true,
        date: date,
        domainAge: domainAge,
        domain1: domain,
      });
    } else {
      res.send("please enter domain name as 'example.com' (only domain name)");
    }
  }
});

问题根源 #

1. 后端循环中每次调用res.render()，处理第一个域名后直接返回响应，后续域名查询逻辑无法执行。
2. EJS模板仅处理单个data对象，没有遍历多组结果的逻辑。

修改方案 #

1. 调整Node.js后端代码 #

收集所有域名的查询结果，统一传递给模板：

app.set('view engine', 'ejs');

app.get("/", (req,res) => {
    res.render("domainagechecker", {
      title: "Domain Details",
      results: [],
      flag: false,
      invalidExists: false
    });
})

app.post("/domainagechecker", async (req, res) => {
  var domain = req.body.domain;
  var list_Domains = domain.split(" ").map(item => item.trim()).filter(item => item); // 去除空字符串
  const results = [];
  let invalidExists = false;

  for (const domainItem of list_Domains) {
    console.log("Processing domain: " + domainItem);

    if (isValidDomain(domainItem)) {
      const result = await whoisinfo(domainItem);
      const date = moment(result.creationDate).format("YYYY-MM-DD");
      const curDate = moment(new Date()).format("YYYY-MM-DD");

      const a = moment(date);
      const b = moment(curDate);

      const years = b.diff(a, "years");
      a.add(years, "years");
      const months = b.diff(a, "months");
      a.add(months, "months");
      const days = b.diff(a, "days");

      const domainAge = `${years} years ${months} months and ${days} days`;

      results.push({
        domainName: result.domainName,
        registrar: result.registrar,
        creationDate: date,
        domainAge: domainAge,
        updatedDate: result.updatedDate,
        registryExpiryDate: result.registryExpiryDate
      });
    } else {
      invalidExists = true;
      console.log(`Invalid domain format: ${domainItem}`);
    }
  }

  if (results.length === 0 && invalidExists) {
    res.send("please enter domain name as 'example.com' (only domain name)");
  } else {
    res.render("domainagechecker", {
      title: "Domain Details",
      results: results,
      flag: results.length > 0,
      invalidExists: invalidExists
    });
  }
});

2. 修改EJS模板代码 #

遍历结果数组生成多行表格，添加无效域名提示：

<div class="container">
      <h1 class="text-center">Domain Age Checker</h1>
      <form action="/domainagechecker" method="post">
        <div class="form-group">
          <label for="domain">Domain URL:</label>
          <textarea
            class="form-control"
            type="text"
            name="domain"
            id=""
            placeholder="write domains separated by space"
          ></textarea>
        </div>
        <br />
        <div class="form-group">
          <button class="btn btn-block btn-primary">Get Details</button>
        </div>
      </form>
      <br />

      <% if (results.length === 0 && invalidExists) { %>
        <div class="alert alert-danger">please enter domain name as 'example.com' (only domain name)</div>
      <% } %>

      <% if (flag) { %>
        <% if (invalidExists) { %>
          <div class="alert alert-warning">部分域名格式无效，请检查输入</div>
        <% } %>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Domain Name</th>
              <th>Running Server</th>
              <th>Creation Date</th>
              <th>Domain Age</th>
              <th>Last Renewal</th>
              <th>Expiry Date</th>
            </tr>
          </thead>
          <tbody>
            <% results.forEach(item => { %>
              <tr>
                <td><%= item.domainName %></td>
                <td><%= item.registrar %></td>
                <td><%= item.creationDate %></td>
                <td><%= item.domainAge %></td>
                <td><%= item.updatedDate %></td>
                <td><%= item.registryExpiryDate %></td>
              </tr>
            <% }) %>
          </tbody>
        </table>
     <% } %>
</div>

关键修改说明 #

• 后端：用数组存储所有查询结果，循环结束后统一渲染模板，避免提前返回响应；同时处理空输入和无效域名的情况。
• 前端：使用EJS的forEach遍历结果数组动态生成表格行，添加不同场景的提示信息，提升用户体验。

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