Блог

Я возился с 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)?

В любом случае, любая помощь приветствуется.

Придумайте массив (или коллекцию) <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) => {
 

Но, допустим, я добавляю случайный индекс к данным и получаю случайное изображение каждый раз, когда пользователь перезагружает страницу. Есть ли способ отличить, есть ли дубликаты, и перезапустить один или несколько из них, чтобы это больше не дубликат?

Когда ответ возвращается в первый раз, вы можете поместить его в локальное хранилище. Когда вы выбираете изображение для отображения, удалите его из массива данных и обновите хранилище. При дальнейших загрузках возьмите элемент хранилища вместо повторной выборки.

Создание изображений из возвращенных 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>