Lodash com Angular 4

Trabalhando com a biblioteca Lodash em uma aplicação Angular 4.

Para esse artigo, nós iremos partir de um projeto já criado com o Angular Cli.

Nosso primeiro passo será a criação de um Service para que possamos receber os nossos dados. Para isso, execute o comando a baixo no seu terminal:

ng g s services/Person

A execução desse comando irá gerar dois novos arquivos .ts, dentro de um novo diretório chamado services na nosso Solution. Podemos ver esse passo na imagem a baixo:

O arquivo person.service.spec.ts é criado para que possamos testar o nosso service, não iremos utilizar ele nesse artigo. Agora o arquivo person.service.ts será o responsável por receber os nossos dados externos e passar em forma de Injeção de Dependência para os nossos componentes.

Para que possamos utilizar o Lodash, nós iremos precisar de um objeto que retorne uma lista de dados, para esse exemplo nós iremos criar um mock de uma lista de pessoas. Para isso, adicione um novo arquivo chamado persons.json e adicione os dados a baixo nele:

[
{
"id": 1,
"name": "Steve Jobs",
"birthday": "24/02/1955"
},
{
"id": 2,
"name": "Bill Gates",
"birthday": "28/10/1955"
}
]

Nosso próximo passo será importação da nossa lista dentro do nosso arquivo person.service.ts. Para que possamos importar algum modulo ou arquivo no TypeScript, nós podemos utilizar o require junto com o caminho do arquivo, mas antes de utilizarmos ele, nós precisamos adicionar uma referencia no nosso arquivo typings.d.ts.

declare const require : any;

Agora abra o seu arquivo de serviço e adicione a seguinte linha de código nele:

const persons = require(‘./persons.json’)

Notem que para importar o nosso arquivo de mock, estamos utilizando o ./persons.json, fizemos isso porque ele foi criado dentro da pasta services, mesmo caminho que nós criamos o nosso Service.

Agora vamos importar a biblioteca do Lodash para o nosso projeto. Para isso, execute o comando a baixo no seu terminal:

npm install --save lodash

Para quem não conhece o Lodash, ele é uma biblioteca que facilita muito o nosso trabalho com a manipulação de arrays, numbers, objects, strings, etc. Caso queira conhecer ele melhor segue o link da sua Documentação.

Vamos agora criar um método para que possamos listar os nossos dados. Para isso, abra o seu arquivo de service novamente e adicione o código a baixo nele:

getAll() {
    let result = persons;
    return result;
 }

O método acima está bem simples, estamos criando uma variavel chamada result e passando para ela a nossa lista. Para que possamos testar ela, abra o seu arquivo app.component.ts e adicione o código a baixo dentro do seu construtor:

constructor(public personService: PersonService) 
{
      console.log(personService.getAll());
}

Acima nós estamos injetando o nosso service no nosso app.component.ts, em seguida nós chamamos o método criado para trazer todos os nossos resultados e enviamos os valores para nossa console.

Vamos agora utilizar o Lodash para criarmos uma pesquisa que nós retorne um valor pelo Id da pessoa. Para isso, adicione o código a baixo dentro do seu Person service.

getById(id: number) {
    let result = persons;
result = _.find(persons, (person) => {
      return person.id = id;
    })
return result;
  }

Vamos entender o nosso código: nós estamos criando um método simples recebendo um id, em seguida nós declaramos uma variável e passamos o valor da nossa lista para ela. Por fim, nós utilizamos o método .find do Lodash para buscar um resultado pelo Id. Para que possamos testar, adicione a linha a baixo dentro do construtor do seu app.component.ts:

console.log(personService.getAll());
console.log(personService.getById(1));

Agora rode o projeto com o comando ng serve, caso todos os passos anteriores estejam OK, você irá ver os valores a baixo na console do seu navegador o retorno dos métodos getAll e getById:

Acima nós temos um exemplo simples de utilização do Lodash, podemos encontrar na documentação muitos outros exemplos que podem facilitar o desenvolvimento no nosso dia a dia.

Compartilhe:

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn

Table of Contents

Postagens Relacionadas

Maze Runner – Correr ou Morrer

Maze Runner – Correr ou Morrer O filme mostra o jovem Thomas (Dylan O’Brien), que vai parar em um lugar desconhecido, sem memória que o
TheWildsVidasSelvagens

the wilds: vidas selvagens

The Wilds: Vidas Selvagens The Wilds: Vidas Selvagens é uma série dramática de TV americana criada por Sarah Streicher que foi lançada no Prime Video
RockBottomRiser

Rock Bottom Riser

Rock Bottom Riser 01/03/2021(US) – Documentário – 1h 10min –   Nota: 0/10   Sinopse     Elenco Nainoa Thompson Como – master navigator Moses
SaferatHome

Safer at Home

Safer at Home 26/02/2021(US) – Filmes – 0h 0min –   Nota: 0/10   Sinopse     Elenco Mais informações Título Original Safer at Home