I am calling data from a movie API using jquery and it has an endpoint where I can call a particular show with an id. The home page displays the movies and clicking them should call another endpoint of the API. Below is my code:
$(function (){
let $movies = $('#showList')
$.ajax({
method:'GET',
url:'http://api.tvmaze.com/shows',
success: function(movies){
$('#show').hide()
$('#showList').removeAttr('hidden');
$.each(movies, function(i,movie){
$movies.append('<li class="list"><a id="ss" href="'+ movie._links.self.href+'">'+ movie.name +'</a></li>')
})
}
})
})
$('body').on('click','.list a',function(event){
event.preventDefault();
$('#showList').hide();
$('#show').empty()
let currentId = event.target.id;
console.log(currentId)
$.ajax({
method:'GET',
url:'http://api.tvmaze.com/shows/'+currentId,
success: function(movies){
$('#show').append('<h1>'+ movies.name +'</h1>')
}
})
$('#show').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>
<footer>Swayam Shah, 10471353</footer>
<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>
How do I get this id when I click on the movies link? The console.log shows empty.
you haven't mentioned id attribute in your anchor tag.
$movies.append('<li class="list"><a href="'+ movie._links.self.href+'">'+ movie.name +'</a></li>')
Had to replace URL with only currentID
Using "this" works for me.
$("a").click(function() {
console.log($(this).attr("id"));
});