javascript 如何使用Express，HTML创建动态列表？

我需要通过从我创建的JSON文件中获取数据来使我的列表动态化，我需要确保当我单击列表中的一个项目时，它会根据id将我带到一个特定的项目。我试过这种方法，但它不工作，列表必须是动态的。
我的API Express：

import express from "express";
import tours from "./tours_file/tours.json" assert { type: "json" };

const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  res.sendFile(
    "C:\\Users\\MartinaPangallo\\OneDrive - NEW TECHNOLOGY DEVELOPMENT ITALIA SRL\\Desktop\\sitoWebFE\\homepage.html"
  );
});

//----prendo tutti i tour

app.get("/tours", (req, res) => {
  res.json(tours);
});

//----Seleziono per id il mio tour

app.get("/tours/:id", (req, res) => {
  const { id } = req.params;
  const tour = tours.find((tour) => tour.id == id);
  res.json(tour);
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

HTML和脚本：

<!DOCTYPE html>
<html lang="en">
  <head>
    <style></style>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Homepage</title>
    <style>
      .active {
        color: gainsboro;
        font-weight: bold;
      }
      .inactive {
        color: grey;
        font-weight: 100;
      }
    </style>
  </head>

  <body>
    <h1>Homepage</h1>
    <p>scegli o aggiungi un tour</p>

    <div class="output"></div>
    <script>
      const output = document.querySelector(".output");
      const output1 = document.createElement("div");
      const url = "tours.json";
      const ul = document.createElement;
      output.append(output1);
      output.append(ul);

      window.addEventListener("DOMContentLoaded", () => {
        output.textContent = "ready";
        loadData();
      });

      function loadData() {
        fetch(url)
          .then((rep) => rep.json())
          .then((data) => {
            //   console.log(data);
            addToPage(data);
          });
      }

      function addToPage(arr) {
        arr.array.forEach((element) => {
          console.log(element);
          const li = document.createElement("li");
          li.textContent = el.name;
          if (el.status) {
            li.classList.add("active");
          } else {
            li.classList.add("inactive");
          }
          ul.append(li);
          li.addEventListener("click", (e) => {
            li.classList.toggle("active");
            li.classList.toggle("inactive");
          });
        });
      }
    </script>
  </body>
</html>

我的JSON：

[
  {
    "id": "1",
    "name": "The Forest Hiker",
    "difficulty": "easy",
    "country": "Trentino",
    "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "id": "2",
    "name": "The Alpinist",
    "difficulty": "hard",
    "country": "Svizzera",
    "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "id": "3",
    "name": "A Bicycle Trip",
    "difficulty": "easy",
    "country": "Sicilia",
    "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "id": "3",
    "name": "Horse Trip",
    "difficulty": "easy",
    "country": "Francia",
    "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
  }
]

我需要帮助，因为我不知道我错在哪里。

下面是一个基于您的代码demo page url的示例
在你的代码中有这些问题，大多数都在你的html中，

fetch（url），url等于tours.json。这是错误的，因为你在express中定义了一个名为tours的端点，你不能向express请求tours.json。
const ul = document.createElement;应该是const ul = document.createElement('ul');，您希望使用它来创建ul，而不是将其分配给另一个变量
arr.array.forEach((element)应该是arr.forEach((el)，因为arr将是数组，而element应该是el，因为您尝试在下面的代码中使用el。
1.还有一些小问题，我想你可以把我的和你的比较一下。
希望它能帮助

javascript 如何使用Express，HTML创建动态列表？

1条答案

相关问题

热门标签

最新问答