第一次使用API。感覺我可以更簡單地顯示影像，但不知道如何

我正在搞亂哈利波特 API（只是為了了解 API 的作業原理），并且已經成功地將影像從站點獲取到我的。但是我已經創建了 8 個函式來完成它，我覺得它可以更容易地完成。這是代碼：

JS：

// API
url = "http://hp-api.herokuapp.com/api/characters";

fetch(url)
.then(function(response){
    return response.json();
})

.then(function(data){
    display_image(data[1].image);
    display_image2(data[2].image);
    display_image3(data[3].image);
    display_image4(data[4].image);
    display_image5(data[5].image);
    display_image6(data[6].image);
    display_image7(data[7].image);
    display_image8(data[8].image);
})

.catch(function(error){
    console.log("Error: "   error)
});

function display_image(image_url){
    document.getElementById("image1").src = image_url;
}

function display_image2(image_url){
    document.getElementById("image2").src = image_url;
}

function display_image3(image_url){
    document.getElementById("image3").src = image_url;
}

function display_image4(image_url){
    document.getElementById("image4").src = image_url;
}

function display_image5(image_url){
    document.getElementById("image5").src = image_url;
}

function display_image6(image_url){
    document.getElementById("image6").src = image_url;
}

function display_image7(image_url){
    document.getElementById("image7").src = image_url;
}

function display_image8(image_url){
    document.getElementById("image8").src = image_url;
}

HTML：

   <div class="popularContainer">
        <div class="grid-1">   
            <img  width="100%" alt="" id="image1">
        </div>
        <div class="grid-2">   
            <img width="100%" alt="" id="image2">
        </div>
        <div class="grid-3">     
            <img width="100%" alt="" id="image3">
        </div>
        <div class="grid-4">   
            <img width="100%" alt="" id="image4">
        </div>
        <div class="grid-5">   
            <img width="100%" alt="" id="image5">
        </div>
        <div class="grid-6">   
            <img width="100%" alt="" id="image6">
        </div>
        <div class="grid-6">   
            <img width="100%" alt="" id="image7">
        </div>
        <div class="grid-6">   
            <img width="100%" alt="" id="image8">
        </div>
    </div>

此外，現在更多的是“如果我這樣做”而不是實際用途。但是假設我在資料上放置了一個隨機索引，并且每次用戶重新加載頁面時都會得到一張隨機圖片。有沒有辦法區分是否有重復項并讓其中一個或多個重新運行，使其不再是重復項？如果某個字符是某個字符，它不會顯示（可能使用 .style.display ），我也可以將它移到哪里嗎？

無論如何，任何幫助表示贊賞。

uj5u.com熱心網友回復：

創建從回傳的影像response.json()的then處理程式是可以做到這一點的更直接的方式之一。Usingdocument.createElement("img")可用于創建每個影像標簽。然后，appendChild可用于將影像直接附加到容器中，而無需創建附加函式：

data.forEach((imgData, index) => {
  let img = document.createElement("img");
  img.id = `image${index}`;
  img.src = imgData.image;
  imgContainer.appendChild(img);
});

const imgContainer = document.getElementById("container");
const url = "http://hp-api.herokuapp.com/api/characters";
fetch(url)
  .then(function(response) {
    return response.json();
  }).then(function(data) {
    /* Slicing the data array down to only 8 elements will enable us to
       show just the first 8 images */
    const littleD = data.slice(0, 8);
    littleD.forEach((imgData, index) => {
      let img = document.createElement("img");
      img.id = `image${index}`;
      img.src = imgData.image;
      imgContainer.appendChild(img);
    });
  })
  .catch(function(error) {
    console.log("Error: "   error)
  });

img {
  width: 100%
}

<div id="container">
</div>

uj5u.com熱心網友回復：

提出<img>要填充的s的陣列（或集合），然后您需要做的就是迭代回應的索引。

您可能還想從 開始[0]，而不是在[1]- JavaScript 陣列是零索引的，而不是一索引的。

const images = document.querySelectorAll('.popularContainer img');
fetch(url)
  .then(response => response.json())
  .then((data) => {
    data.forEach((obj, i) => {
      images[i].src = obj.image;
    });
  });

如果回應包含超過 8 個字符，則切片以僅取前 8 個字符。

data.slice(0, 8).forEach((obj, i) => {

但是假設我在資料上放置了一個隨機索引，并且每次用戶重新加載頁面時都會得到一張隨機圖片。有沒有辦法區分是否有重復項并讓其中一個或多個重新運行，使其不再是重復項？

當回應第一次回傳時，您可以將其放入本地存盤。當您選擇要顯示的影像時，將其從資料陣列中洗掉并更新存盤。在進一步加載時，獲取存盤項而不是再次獲取。

標籤：javascript html 接口

上一篇：檢測嵌入PDF中的滾動

下一篇：為什么span標簽不能帶class屬性？