JSFiddle - React, Tailwind, and code Playground

by ganesh deshmukh

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<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() {
            $('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('https://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);
            });
        }

        appendPosters();
    </script>

</body>