Am trying to use https://jsonplaceholder.typicode.com/photos but not displaying am new to this

Question

This is my code not getting any response from jsonplaceholder, what should i do I tried for others like post/comments it worked but am not getting for photos.

function getPhotos() {
    fetch('https://jsonplaceholder.typicode.com/photos')
        .then((response) => response.json())
        .then((data) => {
            console.log(data);
            let photoLayout = document.querySelector('#photo-layout');
            let html = "";
            data.forEach((e) => {
                // console.log(e)
                html += `
                <div class="col-md-4" >
                    <div class="card h-100 mb-3">
                    <img class="card-img-top" src=${e.thumbnailUrl} alt="photo"/>
                        <div class="card-body">
                            <p class= "id>${e.id}
                            <h5 class="album-title">${e.title}</h5>
                        </div>
                    </div>
                </div>
            `;
                photoLayout.innerHTML = html;
            });
        });

}
getPhotos();

Answer 1

You need to move photoLayout.innerHTML = html; outside of the forEach loop.

function getPhotos() {
    fetch('https://jsonplaceholder.typicode.com/photos')
        .then((response) => response.json())
        .then((data) => {
            const photoLayout = document.querySelector('#photo-layout');
            let html = "";
            data.forEach((e) => {
                html += `
                <div class="col-md-4" >
                    <div class="card h-100 mb-3">
                    <img class="card-img-top" src=${e.thumbnailUrl} alt="photo"/>
                        <div class="card-body">
                            <p class= "id>${e.id}
                            <h5 class="album-title">${e.title}</h5>
                        </div>
                    </div>
                </div>
            `;
            });
            photoLayout.innerHTML = html;
        });
}
getPhotos();