Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Informações da API Fake não estão sendo 'processadas' pelo JavaScript

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. Imagem do erro de busca

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!

1 resposta
solução!

Oi Matheus, tudo bem?

Qual versão do Json server você tá utilizando?

Para verificar qual versão está utilizando, digite:

json-server --version

Caso seja superior ou igual a versão 1 em desenvolvimento alpha, não será possível utilizar o _like na busca da API e por isso vem esse array vazio.

É preciso instalar a seguinte versão para o uso do _like:

npm install -g json-server@0.17.4   

Após isso, tente novamente fazer a busca pelo endpoint http://localhost:3000/artists?name_like=f e terá o retorno esperado na aula.

Um abraço e bons estudos.