GetJSON Affecting Only Last Element

Question

I have some movies which I'd like to have posters above them. I tried making a loop for all items and using getJSON with OMDb API to get poster link, but it seem so affect only the last item. I understand JavaScript, but when it comes to jQuery I'm completely lost. I'd appreciate any help. There's no dumb questions, right? :)

I'll let the code do the rest of the talking...

<html>
  <head>
    <script src="http://code.jquery.com/jquery-3.2.1.js"></script>
  </head>
  <body>
    <ul>
      <a href="http://www.imdb.com/title/tt1232829/" target="_blank"><li><h1>21 Jump Street</h1><h2>2012</h2></li></a>
      <a href="http://www.imdb.com/title/tt2294449/" target="_blank"><li><h1>22 Jump Street</h1><h2>2014</h2></li></a>
      <a href="http://www.imdb.com/title/tt1637725/" target="_blank"><li><h1>Ted</h1><h2>2012</h2></li></a>
    </ul>   
    <script>
      function appendPosters() {    
        var lis = document.getElementsByTagName("li");
        for (i = 0; i < lis.length; i++) {                        
          var newImg = document.createElement("img");

          lis[i].appendChild(newImg);
          lis[i].insertBefore(lis[i].lastChild, lis[i].firstChild);

          var getA = lis[i].parentElement;
          var imdbLink = getA.getAttribute("href");
          var imdbId = imdbLink.substr(26, 9);
          var getImg = lis[i].firstChild;

          $.getJSON('http://www.omdbapi.com/?i=' + imdbId).then(function(response) {
            var poster = response.Poster;
            getImg.setAttribute("src", poster);
          });
        }
      }    
      appendPosters();
    </script>    
  </body>
</html>

Please keep in mind that HTML code and variables cannot be changed due to them being a part of other scripts.

`$.getJSON` is asynchronous. By the time it gets a response from the server and tries to set the `src`, your loop is finished, and `getImg` is the last element. You can use closures to solve this. — blex, Apr 28 '17 at 15:35

score 0 · Accepted Answer · answered Apr 28 '17 at 15:39

Your first issue is that your HTML is invalid. The a elements cannot be children of the ul. You need to place them inside the li.

From there you can use jQuery to loop over the li elements, finding the href of the a within them. I amended the logic to get the IMDB Id to split the value by the / which should be a lot more robust. Your current method would easily be broken simply by changing to https:// URLs. You can then make the request to get the poster URL. Once that completes you can create the new img element, setting the src as required. Try this:

function appendPosters() {
  $("li").each(function() {
    var $li = $(this);
    var urlArr = $li.find('a').prop('href').split('/');
    var imdbId = urlArr[urlArr.length -2];
    
    $.getJSON('http://www.omdbapi.com/?i=' + imdbId).then(function(response) {
      $li.append('<img src="' + response.Poster + '" />');
    });
  });
}

appendPosters();

<html>
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
<ul>
  <li>
    <a href="http://www.imdb.com/title/tt1232829/" target="_blank">
      <h1>21 Jump Street</h1>
      <h2>2012</h2>
    </a>
  </li>
  <li>
    <a href="http://www.imdb.com/title/tt2294449/" target="_blank">
      <h1>22 Jump Street</h1>
      <h2>2014</h2>
    </a>
  </li>
  <li>
    <a href="http://www.imdb.com/title/tt1637725/" target="_blank">
      <h1>Ted</h1>
      <h2>2012</h2>
    </a>
  </li>
</ul>

score 0 · Answer 2 · answered Apr 28 '17 at 15:54

Used jquery to iterate the li elements and create image tag.

function appendPosters() {
    $('li').each(function () {
        var $handler = $(this);
        var imdbId = $(this).parent().attr('href').substr(26, 9);
        getresponse($handler, $handler.parent().attr('href').substr(26, 9), function (data) {
        });
    });
}

function getresponse($handler, imdbId, callback) {
    $.getJSON('http://www.omdbapi.com/?i=' + imdbId).then(function (response) {
        var poster = response.Poster;
        console.log(poster);
        var img = $('<img>'); //Equivalent: $(document.createElement('img'))
        img.attr('src', poster);
        img.appendTo($handler);
        callback(true);
    });
}

Please refer below jsfiddle link to see working demo

https://jsfiddle.net/ganesh2412/bmz7ohx5/

GetJSON Affecting Only Last Element

2 Answers2