使用 Javascript 在 API 中获取图像/标题答案

【问题标题】：Fetching image/title in an API wth Javascript使用 Javascript 在 API 中获取图像/标题
【发布时间】：2021-02-10 13:59:33
【问题描述】：

所以我正在尝试调用 API 来获取图像及其标题，但不久之后就变得很糟糕。我正在尝试使用 forEach 循环遍历 API 并找到图像的 URL 及其标题。然后我将使用 CSS 和 HTML 在我的 HTML 页面上显示。如何使用以下代码实现此目的？

我的 Javascript 文件（需要帮助实施/重构）

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

这是我的 HTML 文件：

<!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>

这是我使用网格系统的 CSS：

.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%
}

【问题讨论】：

从 foreach 回调函数中“返回”HTML 代码不会有任何作用。您应该在此时将这个 HTML 添加到当前文档的某个位置。
stackoverflow.com/q/2641347/2157639

标签： javascript html css foreach fetch-api

【解决方案1】：

我真的不知道你到底卡在哪里，所以如果你能详细说明你的问题是什么。也用于重构：我看到您已经打开和关闭了 getPhotos() 函数。您可以在函数内编写 fetch API 调用逻辑。此外，拥有 UI 的逻辑应该放在另一个函数中并调用 getPhotos()。这有助于管理您的代码，使其更加模块化并将所有内容保留在特定函数中以执行特定任务。

【讨论】：