首页 > 解决方案 > 如何将从节点js中的API抓取的数据填充到EJS模板中

问题描述

我在根目录上的 index.js 文件

const express = require("express");
const app = express();
const path = require("path");
const axios = require("axios").default;
const cors = require("cors");
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "/views"));

app.use(
  cors({
    origin: "http://localhost:3000",
  })
);

fetchData = async () => {
  const data = await axios.get(
    "https://nepse-data-api.herokuapp.com/data/todaysprice"
  );
  console.log(data);
  return data;
};

app.get("/", (req, res) => {
  const nepseData = fetchData();
  res.render("home.ejs", { nepseData });
});

app.listen(3000, () => {
  console.log("listening to port 3000");
});

我在视图目录中的 home.ejs 文件

<!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" />
    <title>Document</title>
  </head>
  <body>
    <%= nepseData %>
  </body>
</html>

当我运行服务器时浏览器显示这个

在此处输入图像描述

API 正在发送此类数据 在此处输入图像描述

我想在我的 ejs 文件上显示名称和价格。我现在该怎么办??

标签: node.jsjsonweb-scraping

解决方案


您必须在await此处添加:

app.get("/", async (req, res) => {
  const nepseData = await fetchData();
  res.render("home.ejs", { nepseData });
});

然后你可以遍历数据:

<% nepseData.forEach(function(row){ %>

   <%= row.companyName %> <%= row.minPrice %>

<% }); %>

推荐阅读