segunda-feira, 12 de dezembro de 2016

[Debug] Reordenar um elemento dentro do Array com AngularJS


Fala galera que acompanha o blog... 

Esse post mesmo sendo voltado para AngularJS, adaptado pode ser utilizado para várias outras linguagens. 



O problema era o seguinte, ao implementar um chat, tenha em mente o WhatsApp, ao receber uma nova mensagem a sua lista de conversas são reordenadas, com esse contato que te mandou uma nova mensagem ficando no topo da lista de conversas. 

Quando estou trabalhando com AngularJS costumo utilizar a biblioteca Lodash, que facilita bastante o trabalho. 

Bom a solução para o problema mencionado foi o seguinte: 

$scope.setGroup = function(group) {

        moveElementArray($scope.chatList, _.indexOf($scope.chatList, group), 0);

 }; 


function moveElementArray(arrRef, fromIndex, toIndex) {

        var element = arrRef[fromIndex];

        arrRef.splice(fromIndex, 1);

        arrRef.splice(toIndex, 0, element);

 }

Onde: 
  • setGroup() é o método que eu chamo da minha página enviando group como parâmetro; 
  • group é o parâmetro (um Objeto) que representa uma conversa dentro da minha lista de conversas; 
moveElementArray() é uma função que recebe 3 parâmetros: 

  • lista de conversas; 
  • O index do meu objeto atualmente dentro da lista de conversas; 
  • 0 que é a primeira posição de um array. 

Dessa forma eu recupero o meu objeto dentro o array e reposiciono ele na primeira posição. Importante deixar claro que o trecho _.indexOf($scope.chatList, group), é a biblioteca Lodash me auxiliando, se você olhar a documentação vai ver que é possível realizar busca binária adicionando mais um parâmetro nessa função.  

Eu tentei deixar mais genérica possível a função moveElementArray para que eu possa utilizar diversas vezes de qualquer parte do meu código e resolvi compartilhar essa função simples, pois trabalhar com array é bastante comum e vai acabar me servindo de "cola" para outros projetos em que estiver trabalhando rs 

É isso ai pessoal, até a próxima!
Luiz Fagner Zordan Analista de Sistemas

Graduado em Sistemas de Informação, atualmente trabalhando na Embraer pela FocusNetworks como FullStack. Sou apaixonado por tecnologia, fascinado por jogos e adoro passar o tempo assistindo séries.