从 Api 获取数据并将 Html 替换为 Api 数据 Nodejs

Question

我正在使用节点 js 中的 Npm 包请求从 API 获取数据

我正在尝试将 API 数据传递给 HTML 但是当我这样做时它不起作用 res.write(mainData) 我什么也没得到我应该得到 HTML 数据那里

const fs = require("fs");
const http = require("http");
let requests = require("requests");
/* ------------------------------- */
const mainFile = fs.readFileSync("index.html", "utf-8");
const replaceVal = (oldval, newval) => {
  let temp = oldval.replace("City,Country", newval.main.temp);
  return temp;
};
const server = http.createServer((req, res) => {
  if (req.url == "/") {
requests(
  "https://api.openweathermap.org/data/2.5/weather?q=wah&units=metric&appid=8b949ed0b4efff029e789ed12aab16a0"
)
  .on("data", (cdata) => {
    const objData = JSON.parse(cdata);
    const arrData = [objData];
    const mainData = arrData
      .map((val) => {
        replaceVal(mainFile, val);
      })
      .join("");
    res.write(mainData);
    console.log(mainData);
  })
  .on("end", (err) => {
    if (err) return console.log(err);
    res.end();
  });
  }
});

server.listen(3000, "127.0.0.1", () => {
  console.log("Listining");
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#main {
  height: 500px;
  width: 300px;
  background-color: #a0b7dc;
  box-shadow: 1px 1px 6px 2px rgb(221, 221, 221);
  border-radius: 10px;
}
#top {
  width: 100%;
  height: 50%;
  display: grid;
  place-items: center ;
}
#bottom {
  width: 100%;
  height: 50%;
  background-color: #c5d0e2;
  border-top-left-radius: 10%;
  border-top-right-radius: 10%;
  display: grid;
  place-items: center;
}

<!DOCTYPE html>
<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="style.css" />
  <title>Document</title>
</head>
<body>
  <div id="main">
    <div id="top">
      <h1>icon</h1>
    </div>
    <div id="bottom">
      <h1>City,Country</h1>
      <h1>Tempracture</h1>
    </div>
  </div>
</body>
</html>

Answer 1

可能还有其他问题，但我可以看出您缺少 return:

const mainData = arrData
  .map((val) => {
    replaceVal(mainFile, val);
  })

应该是

const mainData = arrData
  .map((val) => {
    return replaceVal(mainFile, val);
  })

或者只是

const mainData = arrData.map(val => replaceVal(mainFile, val))

见Array.prototype.map。

从 Api 获取数据并将 Html 替换为 Api 数据 Nodejs

Fetch Data From Api and Replace The Html With Api data Nodejs

javascript

api

node.js