Fetching image/title in an API wth Javascript

Question

So I'm trying to make an API call to fetch images and their titles but got suck shortly afterward. I am trying to use forEach loop to loop through the API and find the URL of the images and their titles. I will then use CSS and HTML to display on my HTML page. How can I achieve this with my following code?

My Javascript file ( need help implementing/ refactoring)

let pictures = document.getElementById("container");

function getPhoto() {}

if (pictures) {
  let URL = "https://jsonplaceholder.typicode.com/albums/2/photos";
  fetch(URL)
    .then((data) => data.json())
    .then((photos) => {
      photos.forEach((photo) => {
        return `<div><img src ="${photo.url}" width="200px" height="200px/></div>`;
      });
      document.getElementById(
        "item-count"
      ).innerHTML = `There are ${photos.length} photo(s) being shown`;
    });
}

Here is my HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/index.css">
    <link rel="stylesheet" type="text/css" href="../css/signup.css">
    <link rel="stylesheet" type="text/css" href="../css/home.css">
    <script defer src="../js/homeScript.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <nav class="nav-content">
            <h1 class="nav-title">Shop<span>yee</span></h1>
            <li class="nav-post">
                <a href="/html/home.html">Home</a>
            </li>
            <li class="nav-post">
                <a href="/html/postImage.html">Post</a>
            </li>
            <li class="nav-post">
                <a href="/html/viewImage.html">View</a>
            </li>
            <li>
                <a href="/html/signup.html">Sign up</a>
            </li>

            <li>
                <a href="/html/login.html">Login In</a>
            </li>
        </nav>
        <h1  id="item-count"></h1>
        <div class="grid-container" id="container">
    
        </div>

    </div>
</body>
</html>

Here is my CSS using the grid system:

.grid-container{
    display:grid;
    grid-template-rows: repeat(4,1fr);
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 1fr;
    grid-auto-columns: 1fr;
    gap:.25rem;
    margin:4px;
    width:100%
}

“Returning” HTML code from within the foreach callback function isn’t going to achieve anything. You should add this HTML somewhere into the current document at that point instead. — CBroe, Oct 28 '20 at 08:29

score 0 · Answer 1 · answered Oct 28 '20 at 08:42

I cannot really get where are you exactly stuck, so if you could elaborate on what your problem is. Also for refactoring: I see you have opened and closed the getPhotos() function. You can write your fetch API call logic inside the function. Also, the logic to have UI should be put in another function and call getPhotos(). This could help in managing your code, by making it more modular and keeping everything inside specific functions to do a specific task.

Fetching image/title in an API wth Javascript

1 Answers1