Estoy tratando de llamar a mi API con un término de búsqueda desde un formulario de envío, pero puedo obtener un error que indica que no puedo leer las propiedades de undefined, no estoy seguro de por qué no hay datos cuando envío la solicitud ajax, a continuación está mi código.
$(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>Cuando reviso la URL, devuelve los datos correctamente pero no de Ajax.
http://api.tvmaze.com/search/shows?q='+searchtermla respuesta de su api parece un poco diferente, parece que le falta un show clave al acceder a href y nombre en $.each ciclo, intente cambiar
... movie._links.self.href ....a
... movie.show._links.self.href ...