在變量內定義動態輸出？

Question

我希望標題不會被錯誤放置或誤導。 為了減少不必要的代碼重復，我想做的事情是這樣的：

const predefinedOutput = "for(let i = 0; i < movie.length; i++) {
    output += `<div class="card">
    <div class="overlay">
    <div class="movie">
        <h2>${movie[i].title}</h2>
            <p><strong>Rating:</strong> ${movie[i].vote_average}</p>
            <p><strong>Release date:</strong> ${movie[i].release_date}</p>
            <a onclick="movieSelected('${movie[i].id}')" href="#">Details</a>
     </div>
    </div>
    <div class="card_img">
        <img src="http://image.tmdb.org/t/p/w300/${movie[i].poster_path}" onerror="this.onerror=null;this.src='../images/imageNotFound.png';">
    </div>
    </div>`;
};

如果完全可行，我如何才能對包含forloop的輸出進行預定義，然后將其用於API調用中，因此我不會在上面的代碼中重復用於不同的搜索（頁面更改） ，類型變更等）？ 提前致謝。

Answer 1

請嘗試以下示例。 不知道要拍什么電影。 在此示例中，它應該是一個數組。 您也可以使用.map()但是movies應該是一個對象。 map和forEach與for循環相同

<script>
movies.forEach( movie => {
    output += `<div class="card">
                    <div class="overlay">
                        <div class="movie">
                            <h2>${movie.title}</h2>
                                <p><strong>Rating:</strong> ${movie.vote_average}</p>
                                <p><strong>Release date:</strong> ${movie.release_date}</p>
                                <a onclick="movieSelected('${movie.id}')" href="#">Details</a>
                        </div>
                    </div>
                    <div class="card_img">
                        <img src="http://image.tmdb.org/t/p/w300/${movie.poster_path}" onerror="this.onerror=null;this.src='../images/imageNotFound.png';">
                    </div>
                </div>`;
});