如何在 JavaScript 中使用 For 循环来显示列表？

Question

I am a beginner in JavaScript and I can't figure out the following problem: I am trying to create a simple JavaScript Movie List. I have 10 lists on the Movie List. I tried to show all of the lists with for loop, but it doesn't work. Here's the code:

function renderModal() {
    for (let i = 0; i < listMovies.length; i++) {
        let movieData = listMovies[i];
        document.getElementById("poster").src = movieData.img;
        document.getElementById("title").innerHTML = movieData.name;
        document.getElementById("genre").innerHTML = movieData.genre;
        document.getElementById("rating-num").innerHTML = "Rating: "+ movieData.rating + "/10";
        document.getElementById("movie-desc").innerHTML = movieData.desc;
        document.getElementById("imdb-page").href = movieData.link;
        return movieData;
    }
}

What do I have to do? Help me to fix it!.

Answer 1

Your return movieData; will stop the loop dead. Not that running it more than once will change anything since you change the same elements over and over. IDs must be unique.

Here is a useful way to render an array

document.getElementById("container").innerHTML = listMovies.map(movieData => `<img src="${movieData.img}" />
  <h3>${movieData.name}</h3>
  <p>${movieData.genre}</p>
  <p>Rating: ${movieData.rating}/10</p>
  <p>${movieData.desc}
    <a href="${movieData.link}">IMDB</a>
  </p>`).join("<hr/>");

Answer 2

返回movieData，for循环会提前结束。你应该把它放在for循环之外。

Answer 3

You can use template tag for list and render it into target element.I am showing an example.

Movie list

<div id="movieList"></div>

template for list

<template id="movieListTemplate">
    <div class="movie">
        <img src="" class="poster" alt="">
        <div class="title"></div>
        <div class="genre"></div>
        <div class="rating-num"></div>
        <div class="movie-desc"></div>
        <div class="imdb-page"></div>
    </div>
</template>

Javascript code:

if (listMovies.length > 0) {
       const movileListTemplate = document.getElementById('movieListTemplate')
       const movieRenederElement = document.getElementById('movieList')

       for(const movie of listMovies) {
           const movieEl = document.importNode(movileListTemplate.content, true)
            movieEl.querySelector('.poster').src = movie.img
            movieEl.querySelector('.title').textContent = movie.name
            //use all queryselector like above
        }
   }