如何将提取数据与从不同提取调用的图像匹配？

Question

希望能够使用与点击的海报匹配的 imdbID 单击图像并显示来自第二次提取调用的数据。

我正在尝试将电影海报打印到页面上 - 然后可以点击电影海报 - 点击后它们会在 div ("info") 中显示导演、演员和年份信息.

我不知道如何让所有图像都对点击事件做出反应。（我认为这是因为 img id，但如果我通过 class 获取图像，我将无法使代码工作）。我可以从第二次获取中获取数据，但它只适用于第一张海报和最后一张图片的数据。（第一个海报也是唯一一个可以点击的。

CodeSandbox 在这里：https://codesandbox.io/s/1ojvormxn7

我可以控制台记录第二次调用的数据，但它与图像不匹配，我不确定如何在需要的地方打印它。

 document.getElementById("searchButton").addEventListener("click", () => {
  const inputSearch = document.getElementById("searchInput").value;
  //console.log(inputSearch);
  fetch(`https://www.omdbapi.com/?apikey=d2d93339&s=${inputSearch}`)
    .then(response => response.json())
    .then(data => {
      console.log(data);
      let posterImage = "";
      let imdb = "";
      data.Search.map(results => {
        //console.log(results.Poster);
        return (
          (posterImage += `<img id="resultPic" class="resultPic" src="${
            results.Poster
          }">`) && (imdb = results.imdbID)
        );
      });
      document.getElementById("app").innerHTML = posterImage;
      document
        .getElementById("resultPic")
        .addEventListener("click", getInfo => {
          fetch(`https://www.omdbapi.com/?apikey=d2d93339&i=${imdb}`)
            .then(response => response.json())
            .then(data => {
              console.log(data);

            });
        });
    });
});

Answer 1

你需要做的是为每个 img 标签使用一个 uniq id，为此，你可以像这样使用 imdbID：

<img id=resultPic-${results.imdbID}

这样你总是有一个 uniq id，然后在渲染 img 标签后，你可以再次映射数据，这次为每个 img 标签添加点击事件，你真的不需要再调用api，你可以这样做：

data.Search.map(results => {
    document
      .getElementById(`resultPic-${results.imdbID}`)
      .addEventListener("click", getInfo => {
        console.log(results);
      });
  });

我在这里更新你的代码，正如你在控制台日志中看到的那样，一旦你点击每张海报，你将收到该海报的数据，你可以在任何你想要的地方使用它：

https://codesandbox.io/s/p981v90nx

Answer 2

我看到的几个问题：

您为每张图片分配了相同的 ID，因此您的 getElementById 调用永远不会像您希望的那样工作。
不确定 data.Search.map 应该返回什么。
考虑事件委托。您可以将侦听器添加到父元素并根据事件目标执行某些操作。像这样：

<div id="container">
[images are appended to this container]
</div>

var container = document.getElementById("container");
container.addEventListener("click", (e) => {
    // e.target will return the object the user clicked (e.g. the image)
    // you could perform a fetch based on some attribute you assigned to the image perhaps
})

不管怎样，您都需要以某种方式区分图像。您还可以创建图像数组并在其上进行映射。

如何将提取数据与从不同提取调用的图像匹配？

How to match fetch data to images called from a different fetch?

javascript

fetch-api

omdbapi