Как сопоставить данные выборки с изображениями, вызванными из другой выборки? - PullRequest
Новая
       39

Как сопоставить данные выборки с изображениями, вызванными из другой выборки?

4 голосов
/ 01 мая 2019

Хотелось бы иметь возможность щелкать изображения и отображать данные из второго вызова извлечения, используя imdbID, соответствующий плакату, по которому щелкнули.

Я пытаюсь распечатать постеры фильмов на странице - постеры фильмовтогда будет кликабельно - при клике они будут отображать режиссера, актеров и информацию о годе в div («информация»).

Я не могу понять, как заставить все изображения реагировать на событие нажатия.(Я думаю, что это потому, что img id, но я не могу заставить код работать, если я получаю изображения по классам).Я могу получить данные из второй выборки, но она работает только на первом постере и с данными из последнего изображения.(Первый постер также является единственным, на который можно кликать.

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

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

Ответы [ 2 ]

1 голос
/ 01 мая 2019

Я вижу несколько проблем:

  1. Вы присваиваете один и тот же идентификатор каждому изображению, поэтому ваш вызов getElementById никогда не будет работать так, как вы этого хотите.
  2. Не уверен, что data.Search.map должен возвращать.
  3. Рассмотрим делегирование события.Вы можете добавить слушателя к родительскому элементу и сделать что-то на основе цели события.Примерно так: 
<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
})

Так или иначе вам нужно как-то дифференцировать изображения.Вы также можете создать массив изображений и нанести на них карту.

1 голос
/ 01 мая 2019

Что вам нужно сделать, это использовать уникальный идентификатор для каждого тега img, для этого вы можете использовать imdbID следующим образом: 

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

Таким образом, у вас всегда есть уникальный идентификатор, затем после рендеринга тегов img вы можете снова отобразить данные и на этот раз добавить событие click для каждого тега img, и вам больше не нужно повторять вызов API. , вы можете сделать это так: 

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

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

https://codesandbox.io/s/p981v90nx

...