Olá desenvolvedores, na parte quatro do tutorial sobre como construir um gráfico de Gantt, trabalharemos com o processamento. Para o processamento implementaremos em dois laços de repetição um conceito baseado em jQuery, porque ele nos permite fazer a varredura em JSON de forma facilitada.

Na parte três deste tutorial trabalhamos a resposta em formato JSON. Desse modo após obter a resposta em JSON fizemos a conversão e armazenamos em uma variável. Esta variável é a responsável por carregar todos os dados já processados vindos do banco de dados para que assim o gráfico de Gantt possa ser preenchido.

var ganttDataResposta = JSON.parse(response);

Com a resposta JSON em mãos é preciso percorrê-la e obter todos os dados para realizar um novo processamento. Então, nesse sentido o jQuery é invocado por meio do método each(). Este método é como um for fazendo uma iteração e executando uma função para cada elemento correspondente, isto é, para cada registro.

O each() recebe como parâmetro a variável ganttDataResposta que é a resposta em formato JSON. E a função contendo um índice que representa a posição do objeto na lista e o objeto em si.

E então podemos manipular os objetos como se fosse uma classe Java, porém, no Javascript, dando um alerta, por exemplo. Dessa forma podemos inserir dentro do primeiro “for” o id com o nome do projeto para exibi-los.

alert(projeto.id + “: ” +projeto.nome);

O mesmo raciocínio se aplica a lista de séries, cada projeto tem sua própria lista de séries, e para listar os elementos de cada projeto é preciso também um “for” para percorrê-la.

O que apresentamos acima é a ideia central do que precisa ser feito, onde a partir do JSON que veio da resposta montaremos um JSON principal que o Gantt possa identificar e ler.

ENTENDENDO O PROCESSAMENTO

Começamos inicializando a variável ganttData, assim, é por meio desta variável que começaremos a criação do JSON. 

var ganttData = “”;
    ganttData+= "[";

É esta variável que armazenará todo o processamento do JSON começando com a varredura da resposta tal com exemplificamos acima. Obviamente que aqui não utilizaremos um alert para exibir os dados. No entanto, dentro do primeiro each() é onde montaremos o cabeçalho do JSON.

E com o objetivo de dar uma pequena modificada no projeto atribuí cores distintas a cada etapa do projeto. Dessa forma, se for a primeira posição será atribuída uma cor em hexadecimal. Mas se não for a primeira posição, verificaremos se o índice é um número do tipo inteiro, se sim ele atribuirá a primeira cor do array, se não, a segunda cor é a que será atribuída.

Continuando com o processamento as variáveis datainicial e datafinal receberão respectivamente as datas onde por meio do método split() iremos pegar os elementos da data separadamente e devolvê-los como um array de strings. Os elementos da série serão concatenados a atribuídos a variável ganttData.

E por fim fazemos uma verificação do tipo se existe mais séries uma vírgula deverá ser inserida como um separador.

If(idx < projeto.series,length – 1){
         ganttData = ",";
}

E então fechamos o each (for) das séries, fazemos a mesma verificação considerando agora se existe ou não mais projetos para serem varridos. E então fecha-se o “for” referente a varredura dos projetos. E fecha-se o JSON e o convertemos para um objeto JSON.

ganttData += “]”;
ganttData = JSON.parse(gantDatta);

EM POUCAS PALAVRAS

Veja abaixo resultado da implementação que acabamos de concluir. Se você for aluno do curso de Formação Java Web poderá ter acesso ao código dessa implementação logo na plataforma logo abaixo da aula. No próximo tutorial iremos aprender como salvar os dados após a manipulação. Eu fico por aqui e nos vemos no próximo tutorial.