Entrar Ainda não tem acesso?
3
respostas

aula 04 imersão front(um resultado de busca)

por MARCEL VITOR JUNQUI
| 25.2k xp | 6 posts
Marketing

Boa noite, estou tendo dificuldades, minha lógica em javascript está me retornando apenas um resultado que seria o Caetano Veloso.. Adompanhei tudo certinho mas não consigo achar o erro.. :(

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:3000/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);
})

ARTISTS json

{
    "artists": [
      { "id": 1, "name": "Foo Fighters", "genre": "Rock", "urlImg": "https://i.scdn.co/image/ab67616100005174c884df599abc793c116cdf15" },
      { "id": 2, "name": "Michael Jackson", "genre": "Pop", "urlImg": "https://i.scdn.co/image/ab676161000051740e08ea2c4d6789fbf5cbe0aa" },
      { "id": 3, "name": "Emicida", "genre": "Hip Hop", "urlImg": "https://i.scdn.co/image/ab67616100005174908b4b4bc90e1518b68b4068" },
      { "id": 4, "name": "Chitãozinho e Xororó", "genre": "Sertanejo", "urlImg": "https://i.scdn.co/image/ab676161000051744606c59411c57f7b49588be4" },
      { "id": 5, "name": "Mc Coringa", "genre": "Funk", "urlImg": "https://i.scdn.co/image/ab67616d00001e02fe8f6dd361ad0f12b88c7f56" },
      { "id": 6, "name": "Arlindo Cruz", "genre": "Samba", "urlImg": "https://i.scdn.co/image/ab67616100005174181873f93056642d7b340839" },
      { "id": 7, "name": "Caetano Veloso", "genre": "MPB", "urlImg": "https://i.scdn.co/image/ab67616100005174e98de50f36cf1aa4bf047757" }
    ]
  }
3 respostas
por MARCEL VITOR JUNQUI
| 25.2k xp | 6 posts
Marketing

como se estivesse lendo a lista inteira e me retornando sempre o último artista que é o Caetano, independente do que digito..

por Ronald Andrade Mendonça da Silva
| 11.5k xp | 3 posts
Sargento

O problema na sua lógica está aqui:

result.forEach(element => {
    artistName.innerText = element.name;
    artistImage.src = element.urlImg;
});

Esse forEach está sobrescrevendo o conteúdo a cada iteração, e no final só aparece o último artista da lista, Caetano Veloso.


function displayResults(result) {
    resultPlaylist.classList.add("hidden");
    resultArtist.classList.remove("hidden");

    resultArtist.innerHTML = ''; \\ limpar resultados anteriores

    result.forEach(element => {
        const artistCard = document.createElement('div');
        artistCard.classList.add('artist-card');

        artistCard.innerHTML = `
            <img src="${element.urlImg}" alt="${element.name}" class="artist-img" />
            <p class="artist-name">${element.name}</p>
        `;

        resultArtist.appendChild(artistCard);
    });
}

Tenta assim, talvez funcione no seu código

por MARCEL VITOR JUNQUI
| 25.2k xp | 6 posts
Marketing

Mas porquê na imersão fizeram exatamente deste jeito e funcionou?

result.forEach(element => {
        const artistCard = document.createElement('div');
        artistCard.classList.add('artist-card');

Aqui eu estaria criando uma classe no index?