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
the response of your api seems a bit different, it seems you are missing one key show while accessing href and name in $.each loop, try changing
...
movie._links.self.href
....
to
...
movie.show._links.self.href
...