第一次使用API。我觉得我可以把图像显示得更简单，但不知道怎么显示

Question

我正在乱搞哈利波特API (只是为了了解API的工作原理)，并且已经成功地把网站上的图像放到了我的网站上。但是我已经创建了8个函数来完成它，我觉得它可以做的容易得多。以下是代码：

联署材料：

// 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 )吗？

无论如何，任何帮助都是非常感谢的。

Answer 1

提出一个<img>的数组(或集合)来填充，然后您所需要做的就是迭代响应的指标。

您还可能希望从[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) => {

，但假设我在数据上添加了一个随机索引，每次用户重新加载页面时都会得到一张随机图片。是否有一种方法来区分是否有重复，并有一个或多个重复运行，所以它不再是一个重复？

当响应第一次返回时，您可以将其放入Local。选择要显示的图像时，将其从数据数组中删除并更新存储。在进一步加载时，使用存储项而不是再次获取。

Answer 2

在response.json()处理程序中从返回的then创建映像是实现这一目标的更简单的方法之一。使用document.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>

​