Having trouble updating the list after fetching API data.
The list should only display results that start with the typed letter.
Any assistance would be greatly appreciated :)
Below is my JavaScript code:
var input = document.getElementById('input');
input.addEventListener('keyup', getJson);
function getJson() {
fetch('https://itunes.apple.com/search?term=indie&entity=song')
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
let result = '';
data.results.forEach(function (song) {
result += `<li>${song.artistName} - ${song.trackName}</li>`;
});
document.getElementById('result').innerHTML = result;
})
.catch(function (empty) {
console.log(empty);
});
}
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Search songs</title>
</head>
<body>
<div id="app">
<h1>Enter artist name or song:</h1>
<input type="text" id="input">
<div class="loader"></div>
<br><br>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>