7

Tenho uma aplicação web em que está sendo utilizado o framework Spring MVC.

Preciso receber uma List em uma função Javascript, mas não sei qual a melhor forma de fazer isso, sem deixar o código confuso. A classe Processos tem atributos String e Integer.

O meu Controller envia a List para a jsp da seguinte forma:

ModelAndView mav = new ModelAndView("relatorios");
List<Processo> processosList = processoDAO.listProcessosAtivos();
mav.addObject("processosList", processosList);

A dúvida é: como receber e usar essa lista numa função javascript? Tentei usar da seguinte forma, mas não deu certo:

No script:

var lista = [];
lista = document.getElementById("lista");

No body:

<input type="hidden" id="lista" value='${processosList}'/>
1
  • 1
    Quando preciso desse tipo de funcionalidade eu retorno uma string JSON e o Javascript interpreta isso como um array naturalmente.
    – cantoni
    Commented 24/11/2015 às 21:13

2 Respostas 2

6

Problema atual

O código não vai funcionar porque o valor de ${processosList} não será uma lista que o JavaScript entende, mas a representação da lista em uma String retornada pelo seu método toString.

O método toSting do ArrayList, por exemplo, retorna algo como:

[elemento1.toString(), elemento2.toString(), ...]

Se a classe Processo não implementa o método toString, o resultado será:

[Processo@872789, Processo@9721768, ...]

Uma solução seria implementar o toString de Processo para retornar algo significativo, talvez o ID do objeto ou qualquer outra informação que seja necessário no JavaScript. Aí você teria algo como:

[10, 11, ...]

Mesmo assim, o seu código JavaScript não está recuperando o valor do campo oculto. O id de um elemento HTML não tem nada a ver com as variáveis que você usa no código.

E, de qualquer forma, confiar no retorno do método toString de uma lista não é algo recomendável, pois existem vários tipos de lista no Java e a implementação usada no sistem pode mudar causando efeitos colaterais indesejados.

Entendendo o JSP

Me parece uma confusão comum pensar que de alguma forma o JSP ou qualquer engine de templates que executa no servidor entende ou se comunica diretamente com o JavaScript que vai ser executado no cliente.

Na verdade, quando o JSP é executado ele entende apenas texto puro. Não importa se uma tag HTML ou mesmo se o código JavaScript estão corretos ou não.

Um JSP simplesmente envia um punhado de texto para o navegador. Este, por sua vez, interpreta o texto conforme as regras do HTML, JavaScript, CSS ou tecnologia correspondente.

Portanto, o seu objetivo dentro de um JSP é gerar uma saída de texto que seja coerente. Nunca pense que uma variável Java vai, de alguma forma mágica, acabar sendo lida diretamente por um script. No fim das contas, tudo o que o navegador do usuário enxerga é uma página estática composta de texto.

Solução

Agora que sabemos que precisamos converter a lista em algum formato de texto para escrever no JSP, podemos pensar em várias possibilidades:

Transformar a lista em uma String no código Java

Isso pode ser feito usando o método toString já mencionado, um método personalizado para concatenar os elementos da lista numa String ou mesmo uma biblioteca que gera XML ou JSON.

Particularmente, eu iria preferir usar JSON por ser uma padrão compatível com JavaScript e um padrão de facto das aplicações web modernas.

Usando a biblioteca Jackson, por exemplo, converter um objeto em uma lista pode ser tão simples quanto isto:

ObjectMapper objectMapper = new ObjectMapper();
String str = objectMapper.writeValueAsString(lista);

Note, porém, que todos os objetos da lista também serão serializados na String. Então, dependendo da complexidade do objeto isso pode não ser desejado.

Supondo, entretanto, que os itens da lista tenham alguma propriedades simples, o resultado do código acima poderia ser algo como:

[{id: 10, titulo: "Titulo 1"}, {id: 11, titulo: "Titulo 2"}, ...]

Se você só precisa de um valor simples como um id, pode implementar sua própria rotina assim:

String str = lista.stream()
    .map(processo -> Integer.toString(processo.getId()))
    .collect(Collectors.joining(",", "[", "]"));

Isso vai retornar uma String assim:

[10, 11, ...]

Independente de como fizer, agora você pode imprimir o conteúdo gerado diretamente dentro de uma tag <script>. Por exemplo, no seu controller você colocaria a String num atributo:

mav.addObject("processos", str);

E no JSP a String seria substituída diretamente no script:

var lista = ${processos};

O resultado quando o navegador receber a página seria algo como:

var lista = [10, 11, ...];

Imprimir os elementos da lista individualmente no JSP

Outra abordagem é não realizar a formatação dos valores diretamente no Java, mas escrever isso no JSP.

Exemplo:

<c:forEach items="${processosList}" var="p">
    <input type="hidden" class="item-processo" value="<c:out value="${p.id}">" />
</c:forEach>

Isso vai gerar algo como:

<input type="hidden" class="item-processo" value="10" />
<input type="hidden" class="item-processo" value="11" />
<input type="hidden" class="item-processo" value="..." />

Então você pode percorrer os elementos com o método getElementsByClassName.

Outra alternativa seria fazer diretamente no JavaScript:

var lista = [];
<c:forEach items="${processosList}" var="p">
fruits.push(<c:out value="${p.id}">);
</c:forEach>

Isso iria gerar algo assim:

var lista = [];
fruits.push(10);
fruits.push(11);
fruits.push(...);

Considerações

Enfim, como disse, existem vários jeitos incluindo vários que não mencionei.

O melhor depende exatamente do que você vai fazer com essa informação.

1

Cara, da uma olhada no RESTController, nele você pode retornar sua List e pelo JS, você recebe com o AJAX, lendo o resultado da requisição.

Depois de você ler a requisição, você pode adicionar os dados em um Array e usar normalmente no seu JS.

Acredito que esse trecho pode te ajudar:

@RestController
public class SeuController {

    @RequestMapping("/getRelatorios")
    public List<Processo> getRelatorio() throws Exception {
        List<Processo> processosList = processoDAO.listProcessosAtivos();

        return processosList;
    }
}

Já no seu JS, você poderia utilizar algo assim:

<script>
    var relatorios = [];

    $.ajax({
        url: '<c:url value="/getRelatorios"/>',
        type: 'GET',
        success: function(data) {
            for(var i = 0; i < data.length; i++){
                relatorios.push(data[i]);
            }
        }
    });
</script>

O ideal seria você ter um Service eu seria chamado por esse Controller, que por sua vez chamaria o seu DAO, porém desta forma acima deve lhe ajudar.

1
  • Explique melhor sua resposta.
    – user82731
    Commented 20/09/2018 às 17:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .