尝试使用forEach方法跨div传播

Question

我尝试使用 forEach 方法创建单独的数组，以便我可以创建一段数据以便能够显示多个元素，而不是使用 innerHTML。

// let movieTitle = document.getElementById("movie-title");
// let movieDesc = document.getElementById("movie-description");

    // This section will allow us to display data to the user
    const options = {
      method: "GET",
      headers: {
        accept: "application/json",
        Authorization:
          // "Bearer Keys Go here
      },
    };
    
    async function getTrendingFilms() {
      try {
        // Fetch data from the API
        const response = await fetch(
          "https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc",
          options // Pass options to fetch
        );
    
        // Check if the response is successful
        if (!response.ok) {
          throw new Error("Could not fetch resource");
        }
    
        // Parse response data as JSON
        const data = await response.json();
    
        // 
        const results = data.results
        console.log(results)
    
        const titleElement = document.getElementById("movie-title");
        const overviewElement = document.getElementById("movie-description")
        
        // Iterate through the first 6 movies and display their titles
        for (let i = 0; i < results.length; i++) {
          // Create a new div element for each movie title
          console.log(results[i].original_title)
    
    
          // Set the inner HTML of the div to the original title of the movie
                titleElement.innerHTML = results[i].original_title;
                overviewElement.innerHTML = results[i].overview;


      // Append the title element to the document body or any other desired container
    }

  } catch (err) {
    // Handle errors
    console.error(err);
}
}

getTrendingFilms();

在下面的评论中，我为我想要覆盖元素的每个部分创建了一个新变量。然而，我不想创建大量变量，而是想尝试创建一个更好的方法，因为

data

包含整个数组。感谢您花时间阅读。

Answer 1

希望这段代码有帮助：

async function getTrendingFilms() {
  try {
    const response = await fetch(
      "https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc",
      options
    );

    if (!response.ok) {
      throw new Error("Could not fetch resource");
    }

    const data = await response.json();

    const results = data.results;

    const moviesContainer = document.getElementById("movies-container");

    // Generate HTML for movies
    results.forEach((movie) => {
      // Create elements for the movie title and overview
      const titleElement = document.createElement("h2");
      titleElement.textContent = movie.original_title;

      const overviewElement = document.createElement("p");
      overviewElement.textContent = movie.overview;

      // Create a container div for each movie
      const movieDiv = document.createElement("div");
      movieDiv.classList.add("movie");

      // Append title and overview elements to the movie div
      movieDiv.appendChild(titleElement);
      movieDiv.appendChild(overviewElement);

      // Append the movie div to the container
      moviesContainer.appendChild(movieDiv);
    });
  } catch (err) {
    console.error(err);
  }
}

getTrendingFilms();