时间戳

首页 > 解决方案 > 在引导程序 4 行和列中对齐 fetch api 对象数组，使用 foreach 循环遍历数组

javascript - 在引导程序 4 行和列中对齐 fetch api 对象数组，使用 foreach 循环遍历数组

问题描述

我正在从一个外部 API 获取数据，该 API 是一个对象数组（每个对象都包含哈利波特电影角色的详细信息，并且有 50 个对象）我正在使用 foreach 循环遍历数组，以便我可以在浏览器中显示每个对象我正在使用 Bootstrap 4 行和列方法，现在我希望数组中的第一个对象显示在第一行第一列和第一行第二列中的第二个对象，类似地，第二行第一列中的第三个对象第二行第二列中的第四个对象等等. 如何使用 bootstrap 4 实现这一目标？

**HTML file**


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossorigin="anonymous"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
            integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
            crossorigin="anonymous"
        />
        <link rel="stylesheet" href="style.css" />
        <title>harry poter</title>
    </head>
    <body>
        <div class="gap">
            <h1 class="font-weight-bold text-dark">
                &#x2728;Harry Potter Characters&#x2728;
            </h1>
        </div>
        <div class="form-group gap-1">
            <input
                type="search"
                class="form-control"
                placeholder="search for character"
            /><i class="fas fa-search search"></i>
        </div>

        <div class="container gap-2">
            <ul id="hpcharacters"></ul>
        </div>

        <script src="main.js"></script>

        <script
            src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
            integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"
        ></script>
    </body>
</html>

JAVASCRIPT 文件

const hpCharacters = document.querySelector("#hpcharacters");

async function getHpCharacters() {
    const res = await fetch("http://hp-api.herokuapp.com/api/characters");

    const data = await res.json();
    let output = "";
    data.forEach((user) => {
        output += `
        <div class="row">
        <div class="col-5">
        <div class="row">
        <div class="col-sm-5">
       <li> ACTOR:${user.actor}</li>
              <li> NAME:${user.name}</li>
       <li> HOUSE:${user.house}</li>
       </div>
       <div class="col-sm-5"">
       <img src="${user.image}" class="img-fluid">
       </div>
       </div>
       </div>
       <div class="col-5">
       <div class="row">
        <div class="col-sm-5">
       <li> ACTOR:${user.actor}</li>
              <li> NAME:${user.name}</li>
       <li> HOUSE:${user.house}</li>
       </div>
       <div class="col-sm-5"">
       <img src="${user.image}" class="img-fluid">
       </div>
       </div>
       </div>
       </div>
       </div>`;
    });
    hpCharacters.innerHTML = output;
}

getHpCharacters();

标签： javascripthtmlarraysbootstrap-4fetch-api

解决方案

我创建了一个帮助函数getCharacterHTML，如果对象存在data并使用它，则返回列的 HTML，for-loop而不是forEach使其简单并以i += 2.

const hpCharacters = document.querySelector("#hpcharacters");

function getCharacterHTML(data, i) {
  const obj = data[i];
  if (!obj) return "";
  return `
        <div class="col-5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-5">
                        <li> ACTOR:${obj.actor}</li>
                        <li> NAME:${obj.name}</li>
                        <li> HOUSE:${obj.house}</li>
                    </div>
                    <div class="col-sm-5"">
                        <img src=" ${obj.image}" class="img-fluid" />
                    </div>
                </div>
            </div>
        </div>
    `;
}

async function getHpCharacters() {
  const res = await fetch("http://hp-api.herokuapp.com/api/characters");

  const data = await res.json();
  let output = "";

  for (let i = 0; i < data.length; i += 2) {
    output += `
            <div class="row">
                ${getCharacterHTML(data, i)}
                ${getCharacterHTML(data, i + 1)}
            </div>
        `;
  }

  hpCharacters.innerHTML = output;
}

getHpCharacters();
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css" />
  <title>harry potter</title>
</head>

<body>
  <div class="gap">
    <h1 class="font-weight-bold text-dark">
      &#x2728;Harry Potter Characters&#x2728;
    </h1>
  </div>
  <div class="form-group gap-1">
    <input type="search" class="form-control" placeholder="search for character" /><i class="fas fa-search search"></i>
  </div>

  <div class="container gap-2">
    <ul id="hpcharacters"></ul>
  </div>

  <script src="main.js"></script>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

推荐阅读