Why does my api ajax request pull undefined? – Blancer.com Tutorials and projects

I am trying to call my API with a search term from a submit form but I can get an error stating cannot read properties of undefined, I am not sure why there is no data when I send the ajax request, below is my code.

$(function (){
   let searchform = $('#searchForm')
     searchform.on("submit",function(event){

        event.preventDefault();
        newNameInput = $('#search_term')
        let searchterm = newNameInput.val();
        console.log(searchterm)
        $('#showList').empty();
        $.ajax({
            method: 'GET',
            url: 'http://api.tvmaze.com/search/shows?q='+searchterm,
            success: function(movies){
                $.each(movies, function(i,movie){
                    $('#showList').append('<li class="list"><a href="'+ movie._links.self.href+'">'+ movie.show.name +'</a></li>')
                    $('#showList').show();
                })
            }
        })
    
    }) 
})

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TV Shows</title>
</head>
<body>
    <h1>TV Shows</h1>
    <div id="show" hidden></div>
    <ul id="showList" hidden></ul>
    <form id="searchForm">
        <input type="text" id="search_term">
        <label for="text">Search</label>
        <button>Submit</button>
    
    </form>
    <a id="homelink" href="/" hidden>Back to All Shows</a>
    
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
        crossorigin="anonymous"></script>
    <script src="/public/js/index.js"></script>
</body>
</html>

When I check the URL it returns data correctly but does not from Ajax.

http://api.tvmaze.com/search/shows?q='+searchterm