将函数值显示到现有的 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值，iSUSSION> sumissionValue 输入提交后请求后，POST请求是充分运作并且确实有效的，我只是不知道如何在使用nodejs和express时替换sumissionValue。

我知道这不是DOM，但是，我不知道如何解决这个问题。我还试图研究jsdom，但我无法理解这种确切的情况。

这是我的文件结构： 文件结构

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>