时间戳

首页 > 解决方案 > 使用 API 中的数据更新图像 div

javascript - 使用 API 中的数据更新图像 div

问题描述

我真的是 JavaScript 新手，我正在尝试开发一个网站，从这个 API 中提取数据 - https://collectionapi.metmuseum.org/public/collection/v1/objects/，并显示来自每个对象的图像主页。

但是，我一直在摆弄 JavaScript，并且页面中的图像元素没有正确更新。不是每个图像 div 代表不同的对象及其图像（很像“pinterest”样式页面），而是使用所有图像同时更新 div。

最终的目标是从一个 objectID 检索数据，用该数据更新卡片 div，然后转到下一个 objectID，依此类推......

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();

感谢任何建议:)

标签： javascripthtmlapi

解决方案

如果我没有误解您的目标，我相信您应该将函数替换为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;
};

然后，您可以使用另一个异步函数来处理循环：

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();

推荐阅读