5
respostas

Pensamentos não aparecem

Primeiro tentei buscar o erro sozinho e não encontrei, até que fui ver aqui no forum se outras pessoas ja tinham passado por esse erro tambem, tentei usar a solução que indicaram em outro topico desse mesmo erro de não aparecer os pensamentos mas não consegui, mesmo alterando o que indicaram não houve solução, aqui está meu codigo

const api = {
    async buscarPensamentos() {
        try {
            const response = await fetch('http://localhost:3000/pensamentos');
            return await response.json();
        } catch {
            alert('Erro ao buscar pensamentos');
            throw error
        }
    },

    async salvarPensamento(pensamento) {
        try {
            const response = await fetch('http://localhost:3000/pensamentos', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(pensamento),
            });
            return await response.json();
        } catch {
            alert('Erro ao buscar pensamentos');
            throw error;
        }
    },
};

export default api;
5 respostas

Oi, Yago. Tudo bem?

Aqui eu testei o código e não tive nenhum problema ao renderizar os cards de pensamento. Você poderia, por gentileza, enviar o seu projeto completo em um repositório no GitHub? Assim consigo analisar com mais detalhes o que pode estar acontecendo.

Se possível, também envie uma imagem do terminal no momento em que você executa o projeto. Às vezes pode aparecer alguma mensagem ou aviso por lá que ajuda bastante a identificar a origem do problema.

Fico no aguardo e a disposição :)

Oi Mike, perdão pela demora, aqui está o link do projeto no GitHub: https://github.com/yagooxvz/Projeto-Memoteca

Oi, Yago.

O motivo dos pensamentos não aparecerem está no arquivo ui.js, no trecho em que você faz a iteração dos dados. Você está utilizando pensamentos.array.forEach(...), porém o retorno da requisição já é um array diretamente. Dessa forma, ao tentar acessar a propriedade array, o JavaScript não encontra esse campo e a renderização dos cards não acontece.

O ajuste é iterar diretamente sobre o resultado recebido da API, então a forma correta de percorrer é utilizando pensamentos.forEach(pensamento => { ... }). Nesse caso, cada objeto do array será tratado corretamente dentro da função de criação dos elementos na interface.

  const pensamentos = await api.buscarPensamentos();
  pensamentos.forEach((pensamento) => {
    listaPensamentos.innerHTML += `
        <li class="li-pensamento" data-id="${pensamento.id}">
        <img src="assets/imagens/aspas-azuis.png" alt="Aspas azuis" class="icone-aspas">
        <div class="pensamento-conteudo">${pensamento.conteudo}</div>
        <div class="pensamento-autoria">${pensamento.autoria}</div>
        </li>
            `;
  });

Após realizar essa alteração, os cards devem voltar a ser exibidos normalmente na tela.

Espero ter ajudado.

Siga firme nos seus estudos e conte com o fórum sempre que precisar.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Fiz a correção como você falou, porem ainda não aparecem os pensamentos no mural. (ja alterei e subi para o github)

Oi, Yago.

Rodei novamente o seu projeto por aqui e os pensamentos estão renderizando normalmente. Para conseguirmos identificar melhor o que pode estar acontecendo no seu ambiente, vamos fazer uma pequena alteração nos blocos catch.

Você só precisa adicionar um parâmetro para capturar o erro e exibí-lo junto com a mensagem do alert, assim:

catch (e) { // <-- Capturando o erro como parâmetro
    alert('Erro ao buscar pensamentos  ' + e) // <-- Exibindo o erro junto da mensagem
}

É preciso fazer em todos os blocos catch, há um no arquivo ui.js e dois no api.js.

Na imagem abaixo, eu não havia subido o servidor com o json-server, então o navegador mostrou um erro de rede.

Caixa de alerta exibindo uma mensagem de erro de rede ao tentar obter um recurso de localhost:5500, com um botão "OK".

Depois de fazer essa alteração, executa novamente o projeto e copia o erro que aparecer no alert para me enviar aqui, por favor. Também dá uma olhada no console do navegador para ver se aparece alguma mensagem ou aviso.

Sigo a disposição :)