Обновите блоки изображений с данными из API

Question

Я новичок в JavaScript и пытаюсь разработать веб-сайт, который извлекает данные из этого API - https://collectionapi.metmuseum.org/public/collection/v1/objects/ и отображает изображение каждого объекта на домашней странице.

Однако я возился с JavaScript, и элементы изображения на странице не обновляются правильно. Вместо того, чтобы каждый блок изображения представлял отдельный объект и его изображение (как и страница стиля "pinterest"), блоки div обновляются одновременно со всеми изображениями.

В конечном итоге цель состоит в том, чтобы получить данные из одного идентификатора объекта, обновить div карты этими данными и перейти к следующему идентификатору объекта и так далее ...

let currentObject = 34;
const limit = 100; 

const getObjects = async () => {

   const res = await fetch(`https://collectionapi.metmuseum.org/public/collection/v1/objects/${currentObject}`);
   const data = await res.json();

   if (currentObject <= limit) {
       
       getObjects();
       

   const imagesArray = document.getElementsByClassName("card-img");

       for (var i = 0, x = imagesArray.length; i < x; i++) {
           imagesArray[i].src = currentObject.primaryImage;

           currentObject++;
       }
       
   } else {
       return;
   }

}
getObjects(); 

Примите во внимание любые предложения:)

Answer 1

Если я правильно понял вашу цель, я считаю, что вам следует заменить функцию getObjects на getObject и сосредоточить ее на одной задаче: получить объект:

const getObject = async () => {
  const res = await fetch(
    `https://collectionapi.metmuseum.org/public/collection/v1/objects/${currentObject}`
  );
  const data = await res.json();
  return data;
};

Затем вы может иметь другую функцию asyn c для обработки цикла:

const imagesArray = document.getElementsByClassName("card-img");
const limit = 100;
let currentObject = 34;

async function run() {
  for (let i = 0; i < imagesArray.length; i++) {
    if (currentObject <= limit) {
      const currentObject = await getObject(imageIndex);
      imagesArray[imageIndex].src = currentObject.primaryImage;
      currentObject++;
    } else {
      break;
    }
  }
}
run();