在变量内定义动态输出？

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>`;
});