CODEWITHSUNDEEP
javascriptjsonajaxomdbapi
Rajan Randev
Rajan Randev

Reputation: 39

data isn't pulling through from omdbapi.com

I've connected to the omdbapi website to try to pull through the relevant information about a film that is search for in the form I've created. The poster image isn't displaying and the title is coming up as undefined. I've console.log the data response from the website and the correct object is being shown in the developer tools.

Can someone give me some guidance into why it may not be working?

$(document).ready(() => {
    $('#searchForm').on('submit', (e) => {
        let searchText = $('#searchText').val();
        getMovies(searchText);
        e.preventDefault();
    })
});

function getMovies (searchText) {
    axios.get('http://www.omdbapi.com/?t=' + searchText + '&apikey=480344f1&r=json').then( (response) => {
        console.log(response);
        let movies = response.data;
        let output = '';
        $.each(movies, (movies) => {
            output += 
            `<div class="col-md-3">
                <div class="well text-center">
                    <img src="${movies.Poster}"/>
                    <h5>${movies.Title}</h5>
                    <a onclick="movieSelected('${movies.imdbID}')" class="btn btn-primary" href="#">Movie Details</a>
                </div>
            </div>`
            ;
        });

        $('#movies').html(output);
    })
    .catch( (err) => {
        alert(err);
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Movie Selector</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">MovieInfo</a>
            </div>
        </div>
    </nav>
    <div class="container">
        <div class="jumbotron">
            <h3 class="text-center">Search for any movie</h3>
            <form id="searchForm">
                <input type="text" class="form-control" id="searchText" placeholder="Search Movie" />
            </form>
        </div>
    </div>
    <div class="container">
        <div id="movies" class="row"></div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">    
    </script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/script.js"></script>
    
</body>
</html>

Upvotes: 1

Views: 41

Answers (0)

Related Questions