How to add each object data to div?

I have a function that returns the data I have, but I know the map cannot be used for these objects. The function I use below creates div for only one of the objects I have. How can I create a div for every data I have?

// the div from which the data comes from
window.addEventListener('DOMContentLoaded', () => {
        let favoriteFilms = Storage.getAllFilmsToStorage()
        favoriteFilms.forEach(data => {
            filmRequest.getDatasForID(data.id)
                .then(films => {
                    ui.allItemToUI(films)
                })
        })
    })
// The function I added to the div
allItemToUI(film) {
        if (film) {
            this.favoriteHeader.style.display = "grid"
            this.favoriteSection.style.display = "grid"
            this.favoriteSection.innerHTML = `
                <div class="film-card" id="${film.imdbID}">
                                <div class="film-poster">
                                    <img src="${film.Poster == "N/A" ? "https://blog.rahulbhutani.com/wp-content/uploads/2020/05/Screenshot-2018-12-16-at-21.06.29.png" : film.Poster}"
                                        alt="${film.Title == "N/A" ? "Name Not Found" : film.Title}">
                                </div>
                                <div class="film-info">
                                    <div class="favorite-btn"><i class="fa fa-star" style="color:white" id="favorite"></i></div>
                                    <div class="film-description">
                                        <h3>${film.Title == "N/A" ? "Name Not Found" : film.Title}</h3>
                                        <p class="film-story">
                                        lorem ıpsum dolor sit amet
                                        </p>
                                        <p class="film-artist">
                                            Actors: <span>lorem ıpsum</span>
                                        </p>
                                        <p class="film-director">Director: <span>lorem ıpsum</span></p>
                                    </div>
                                    <div class="film-property">
                                        <span class="film-imdb-rates">8.8/10 <span class="rate-data-company"><em>by</em>
                                                IMDB</span>
                                        </span>
                                        <span class="film-vision-date">Release Date: <span>${film.Year == "N/A" ? "Date Not Found" : film.Year}</span></span>
                                    </div>
                                </div>
                            </div>
                `
        }
    }
Object { Title: "The Shawshank Redemption", Year: "1994", Rated: "R", Released: "14 Oct 1994", Runtime: "142 min", Genre: "Drama", Director: "Frank Darabont", Writer: "Stephen King (short story \"Rita Hayworth and Shawshank Redemption\"), Frank Darabont (screenplay)", Actors: "Tim Robbins, Morgan Freeman, Bob Gunton, William Sadler", Plot: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.", … }
Object { Title: "The Godfather: Part II", Year: "1974", Rated: "R", Released: "18 Dec 1974", Runtime: "202 min", Genre: "Crime, Drama", Director: "Francis Ford Coppola", Writer: "Francis Ford Coppola (screenplay by), Mario Puzo (screenplay by), Mario Puzo (based on the novel by)", Actors: "Al Pacino, Robert Duvall, Diane Keaton, Robert De Niro", Plot: "The early life and career of Vito Corleone in 1920s New York City is portrayed, while his son, Michael, expands and tightens his grip on the family crime syndicate.", … }

Great question, so I think it’s not appending the objects because you are not += in the innerHTML. That might be a quick fix. You might also consider using append or appendChild and creating the HTML element in javascript.

this.favoriteSection.innerHTML +=

Let me know if that helps; if not, feel free to post a link to your code, and I can take a look at it.

1 Like

Your solution is correct. You don’t even see what’s in front of you after dealing with codes for a long time :slight_smile: Thank you.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.