2
respostas

Onde estou errando

Meu controller

@GetMapping("/{id}/temporadas/top")
    public List<EpisodioDTO> obterTopEpisodios(@PathVariable Long id){
        return servico.obterTopEpisodios(id);
    }

Meu serviço

public List<EpisodioDTO> obterTopEpisodios(Long id) {
        var serie = repositorio.findById(id).get();
        return repositorio.topEpisodiosPorSerie(serie)
                .stream()
                .map(e -> new EpisodioDTO(e.getTemporada(), e.getNumeroEpisodio(), e.getTitulo()))
                .collect(Collectors.toList());
    }

Meu repository

  @Query("SELECT e FROM Serie s JOIN s.episodios e WHERE s = :serie ORDER BY e.avaliacao DESC LIMIT 5")
    List<Episodio> topEpisodiosPorSerie(Serie serie);

Meu front end alterado para receber os top 5 episodios

// Função para carregar o Top 5 Episódios de uma série
// Função para carregar o Top 5 Episódios de uma série
function carregarTop5Episodios() {
    getDados(`/series/${serieId}/episodios/top5`)
        .then(data => {
            console.log(data); // Adicione esta linha para verificar os dados recebidos
            if (!Array.isArray(data)) {
                throw new Error('A resposta recebida não é um array');
            }

            const ul = document.createElement('ul');
            ul.className = 'episodios-lista';

            const listaHTML = data.map(episodio => `
                <li>
                    ${episodio.numeroEpisodio} - ${episodio.titulo}
                </li>
            `).join('');
            ul.innerHTML = listaHTML;

            fichaSerie.innerHTML = ''; 
            fichaSerie.appendChild(ul);
        })
        .catch(error => {
            console.error('Erro ao obter o Top 5 Episódios:', error);
            fichaSerie.textContent = 'Não foi possível carregar o Top 5 Episódios.';
        });
}
2 respostas

Acabei não colocando corretamente o código no front após a alteração para o top 5, colocando:

// Função para adicionar a opção de Top 5 Episódios na barra de rolagem
function adicionarOpcaoTop5() {
    const optionTop5 = document.createElement('option');
    optionTop5.value = 'top5';
    optionTop5.textContent = 'Top 5 Episódios';
    listaTemporadas.appendChild(optionTop5);
/ Função para carregar o Top 5 Episódios de uma série
function carregarTop5Episodios() {
    getDados(`/series/${serieId}/episodios/top5`)
        .then(data => {
            console.log(data); // Adicione esta linha para verificar os dados recebidos
            if (!Array.isArray(data)) {
                throw new Error('A resposta recebida não é um array');
            }

            const ul = document.createElement('ul');
            ul.className = 'episodios-lista';

            const listaHTML = data.map(episodio => `
                <li>
                    ${episodio.numeroEpisodio} - ${episodio.titulo}
                </li>
            `).join('');
            ul.innerHTML = listaHTML;

            fichaSerie.innerHTML = ''; 
            fichaSerie.appendChild(ul);
        })
        .catch(error => {
            console.error('Erro ao obter o Top 5 Episódios:', error);
            fichaSerie.textContent = 'Não foi possível carregar o Top 5 Episódios.';
        });
}


// Adiciona ouvinte de evento para o elemento select
listaTemporadas.addEventListener('change', carregarEpisodios);

// Adiciona ouvinte de evento para o elemento select
listaTemporadas.addEventListener('change', function() {
    const temporadaSelecionada = listaTemporadas.value;
    if (temporadaSelecionada === 'top5') {
        carregarTop5Episodios(); // Chama a função para carregar os Top 5 Episódios
    } else {
        carregarEpisodios(temporadaSelecionada); // Chama a função para carregar episódios da temporada selecionada
    }
});


// Carrega as informações da série e as temporadas quando a página carrega
carregarInfoSerie();
carregarTemporadas();
carregarTop5Episodios();

Oii, Erivan! Tudo bem?

Fico feliz que tenha encontrado uma solução observando o seu código. Continue se dedicando aos estudos e as atividades do curso e qualquer dúvida, não hesite em recorrer ao fórum.

Bons estudos, Erivan!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software