Olá!
Recentemente teve a Imersão Alura de Front-End e eu estou com um problema que não consigo resolver.
Quando digito algo no meu Search Input para que, em teoria, buscasse um artista dentro da API Fake, não estou tendo retorno. Tanto a imagem quanto o nome do artista em questão não estão aparecendo.
HTML
<div id="result-artist" class="hidden">
<div class="grid-container">
<div class="artist-card" id="">
<div class="card-img">
<img id="artist-img" alt="" class="artist-img" />
<div class="play">
<span class="fa fa-solid fa-play"></span>
</div>
</div>
<div class="card-text">
<a title="Foo Fighters" class="vst" href=""></a>
<span class="artist-name" id="artist-name"></span>
<span class="artist-categorie">Artista</span>
</a>
</div>
</div>
</div>
</div>
JavaScript
const searchInput = document.getElementById('search-input');
const resultArtist = document.getElementById('result-artist');
const resultPlaylist = document.getElementById('result-playlists');
function requestApi(searchTerm) {
const url = `http://localhost:5000/artists?name_like=${searchTerm}`
fetch(url)
.then((response) => response.json())
.then((result) => displayResults(result))
}
function displayResults(result) {
resultPlaylist.classList.add('hidden');
const artistName = document.getElementById('artist-name');
const artistImage = document.getElementById('artist-img');
result.forEach(element => {
artistName.innerText = element.name;
artistImage.src = element.urlImg;
});
resultArtist.classList.remove('hidden');
}
document.addEventListener('input', function () {
const searchTerm = searchInput.value.toLowerCase();
if (searchTerm === '') {
resultPlaylist.classList.add('hidden');
resultArtist.classList.remove('hidden');
return
}
requestApi(searchTerm);
})
Já li e reli, fiz e refiz, mas não consigo achar o problema. HELP! Desde já, obrigado!