通过获取API更新EJS变量

发布于 2025-02-13 06:46:38 字数 3177 浏览 0 评论 0原文

我正在尝试制作这个简单的应用程序，从而从免费的公共API中获取一些数据，这些数据将显示特定状态的人口。但是，我很难更新人口变量，但我无法弄清楚这个问题。该应用程序正确记录了人口，但未能在应用程序中进行更新。

/* Requiring NPM packages */

const express = require("express");
const ejs = require("ejs");
const fetch = require("node-fetch");
const bodyParser = require("body-parser");
const _ = require("lodash");

/* Using Express */
const app = express();
const port = 3000;

/* Using Static Files */
app.use(express.static(__dirname + "/public"));

/* Using ejs*/
app.set("view engine", "ejs");

/* Using Body-Parser */
app.use(bodyParser.urlencoded({ extended: true }));

/* Fetching API data */
let nation = "Not Chosen";
let year = "Not Chosen";
let myStatePopulation = "TBD";

const data = async (nation, year) => {
  const response = await fetch(
    "https://datausa.io/api/data?drilldowns=State&measures=Population&year=" +
      year
  );
  const myJson = await response.json();

  const allState = myJson.data;
  let myState = allState.find((x) => x.State === nation);
  myStatePopulation = myState.Population;
  console.log(myStatePopulation);
};

// data();
/* Starting the server */
app.get("/", function (req, res) {
  res.render("index", {
    content: "United States Population",
    state: nation,
    year: year,
    population: myStatePopulation,
  });
});

/* Posting Data */

app.post("/", function (req, res) {
  if (req.body.stateName && req.body.yearDate) {
    nation = _.capitalize(req.body.stateName);
    year = Number(req.body.yearDate);

    data(nation, year);
    res.redirect("/");
  } else {
    nation = "Not Chosen";
    year = "Not Chosen";
    myStatePopulation = "TBD";
    console.log("redirecting to main page");
    res.redirect("/");
  }
});

app.listen(port, () => console.log("app is running on port : " + port));

只是为了更清楚这就是EJS文件的内容

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/styles.css" />
    <title>US Population</title>
  </head>
  <body>
    <div class="header centertext">
      <h1><%= content %></h1>
    </div>
    <div class="content centertext">
      <p>State : <%= state %></p>
      <p>Year : <%= year %></p>
      <p>Population : <%= population %></p>
    </div>
    <div class="form centertext">
      <form action="/" method="post">
        <div class="form inputs">
          <input type="text" name="stateName" placeholder="type your state" />
        </div>
        <div class="form inputs">
          <input
            type="text"
            name="yearDate"
            placeholder="type your desired year (2013-2020)"
          />
        </div>
        <div class="form submit">
          <button type="submit">Sumbit</button>
        </div>
      </form>
    </div>
  </body>
</html>

原文

I am trying to make this simple app where I would fetch some data from a free public API that would show the population of a specific state. However, I am having difficulty updating the population variable and I cannot figure out the problem. the app logs the population properly but fails to update it in the app it self.

/* Requiring NPM packages */

const express = require("express");
const ejs = require("ejs");
const fetch = require("node-fetch");
const bodyParser = require("body-parser");
const _ = require("lodash");

/* Using Express */
const app = express();
const port = 3000;

/* Using Static Files */
app.use(express.static(__dirname + "/public"));

/* Using ejs*/
app.set("view engine", "ejs");

/* Using Body-Parser */
app.use(bodyParser.urlencoded({ extended: true }));

/* Fetching API data */
let nation = "Not Chosen";
let year = "Not Chosen";
let myStatePopulation = "TBD";

const data = async (nation, year) => {
  const response = await fetch(
    "https://datausa.io/api/data?drilldowns=State&measures=Population&year=" +
      year
  );
  const myJson = await response.json();

  const allState = myJson.data;
  let myState = allState.find((x) => x.State === nation);
  myStatePopulation = myState.Population;
  console.log(myStatePopulation);
};

// data();
/* Starting the server */
app.get("/", function (req, res) {
  res.render("index", {
    content: "United States Population",
    state: nation,
    year: year,
    population: myStatePopulation,
  });
});

/* Posting Data */

app.post("/", function (req, res) {
  if (req.body.stateName && req.body.yearDate) {
    nation = _.capitalize(req.body.stateName);
    year = Number(req.body.yearDate);

    data(nation, year);
    res.redirect("/");
  } else {
    nation = "Not Chosen";
    year = "Not Chosen";
    myStatePopulation = "TBD";
    console.log("redirecting to main page");
    res.redirect("/");
  }
});

app.listen(port, () => console.log("app is running on port : " + port));

just to make it more clear here is the content of the ejs file

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/styles.css" />
    <title>US Population</title>
  </head>
  <body>
    <div class="header centertext">
      <h1><%= content %></h1>
    </div>
    <div class="content centertext">
      <p>State : <%= state %></p>
      <p>Year : <%= year %></p>
      <p>Population : <%= population %></p>
    </div>
    <div class="form centertext">
      <form action="/" method="post">
        <div class="form inputs">
          <input type="text" name="stateName" placeholder="type your state" />
        </div>
        <div class="form inputs">
          <input
            type="text"
            name="yearDate"
            placeholder="type your desired year (2013-2020)"
          />
        </div>
        <div class="form submit">
          <button type="submit">Sumbit</button>
        </div>
      </form>
    </div>
  </body>
</html>

分享到QQ

分享到微博