在已有的 EJS 模板上显示函数值

Question

我需要将 JS 文件 (indexRoutes.js) 中的值显示到 EJS 模板 (calculator.ejs) 的输入框中，我已经通过制作的页脚包含了脚本。

这是我拥有的 JS 函数的代码：

router.post("/calculator", (req, res) => {
  let ethAddress = req.body.ethereumAddress;
/*BEGINNING OF CALCULATION METHOD
  /* PART 1 For getting data, using node-fetch .json to convert the data into an array of objects*/
  function APIRetrieval() {
    var userTransactions = [];
    var totalValue = 0;
    fetch(
      `https://api.etherscan.io/api?module=account&action=txlist&address=${ethAddress}&startblock=0&endblock=99999999&sort=asc&apikey=${APIKey}`
    )
      .then((data) => {
        return data.json();
      })
      .then((retrievedData) => {
        // Extract just the results from the Javascript object for a Javascript object of just the transactions.
        userTransactions = retrievedData.result;

        // This loop takes all values from all previous transactions and adds them together for a number to be used in the calculation of emissions.
        for (var i = 0; i < userTransactions.length; i++) {
          // console.log(userTransactions[i].gasPrice);
          let currentValue = Number(userTransactions[i].gasPrice);
          totalValue = totalValue + currentValue;
        }
      });
  }
  APIRetrieval();
});

这是我拥有的 EJS 表单的代码：

<form action="/calculator" method="POST">
  <div class="form-group px-5 mt-4">
    <div class="d-flex justify-content-center">
      <label for="ethAddress">Ethereum Address</label>
    </div>
    <div class="d-flex justify-content-center mt-2">
      <input
        type="string"
        id="ethereumAddress"
        name="ethereumAddress"
        class="form-control"
        placeholder="Enter Ethereum Address"
      />
    </div>
  </div>
  <div class="d-flex justify-content-center">
    <button type="submit" class="btn btn-primary mt-4">Calculate</button>
  </div>
  <div class="d-flex justify-content-center mt-4">
    <label for="emissionValue">Total Emission Price To Offset</label>
  </div>
  <div class="d-flex justify-content-center mt-2 mb-4">
    <input
      type="string"
      id="emissionValue"
      name="emissionValue"
      class="form-control"
      placeholder=""
      value=""
      readonly
    />
  </div>
</form>

我想显示JS文件中的totalValue值，在post请求提交后的emissionValue输入中，post请求完全正常工作并且确实有效，我只是不知道如何在使用 NodeJS 和 Express 时替换 emissionValue 中的空值。

我知道它没有 DOM，但是，我不知道如何解决这个问题。我也曾尝试调查 JSDom，但我无法理解这个确切的场景。

这是我的文件结构： File Structure

Answer 1

假设您的 ejs 文件名为 calculator.ejs 并且您已经在主文件中添加了 ejs 中间件和 ejs 安装程序。

在你的端点，当你发送响应时，你可以这样发送：

router.post("/calculator", (req, res) => {
  let ethAddress = req.body.ethereumAddress;
/*BEGINNING OF CALCULATION METHOD
  /* PART 1 For getting data, using node-fetch .json to convert the data into an array of objects*/
  function APIRetrieval() {
    var userTransactions = [];
    var totalValue = 0;
    fetch(
      `https://api.etherscan.io/api?module=account&action=txlist&address=${ethAddress}&startblock=0&endblock=99999999&sort=asc&apikey=${APIKey}`
    )
      .then((data) => {
        return data.json();
      })
      .then((retrievedData) => {
        // Extract just the results from the Javascript object for a Javascript object of just the transactions.
        userTransactions = retrievedData.result;

        // This loop takes all values from all previous transactions and adds them together for a number to be used in the calculation of emissions.
        for (var i = 0; i < userTransactions.length; i++) {
          // console.log(userTransactions[i].gasPrice);
          let currentValue = Number(userTransactions[i].gasPrice);
          totalValue = totalValue + currentValue;
        }
      });
      return totalValue;
  }
  const totalValue = APIRetrieval();
  res.render("calculator.ejs", {totalValue: totalValue});
});

您基本上渲染该文件并向其发送值，您可以在其中使用的值
在您的 calculator.ejs 中，您现在可以使用：

<div class="d-flex justify-content-center mt-2 mb-4">
          <input
            type="string"
            id="emissionValue"
            name="emissionValue"
            class="form-control"
            placeholder=""
            value="<%= totalValue =>"
            readonly
          />
        </div>

在已有的 EJS 模板上显示函数值

Displaying function values onto an already existing EJS template

ejs

node.js

express