在变量内定义动态输出？

Question

I hope the title is not wrongfully put or misleading. What I want to do, in order to cut down unnecessary repetition of code, is something like this:

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

How can I, if its doable at all, to sort of pre-define an output that includes a forloop, that will be then used in an API call, so I don't make duplicates of the code above for different searches (page change, genre change etc.)? Thanks in advance.

Answer 1

Try the following example. Don't know what movies is so had to make something of it. In this example it should be an array. You could also use .map() but then the movies should be an object. map and forEach do the same as a for loop

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