JSON (JavaScript Object Notation) é uma forma de representar dados em formato de texto que é facilmente legível e manipulável por seres humanos e por computadores. O JSON é amplamente utilizado em aplicações web modernas, especialmente com o uso de frameworks como o Angular. O JSON é um formato de dados simples, porém poderoso, que permite transmitir dados de uma aplicação para outra de maneira fácil e eficiente.

No começo o JSON era um formato de dados feito para ser compatível com Javascript, no entanto devido a sua flexibilidade hoje em dia pode ser utilizado com qualquer linguagem de programação, sendo especialmente útil para transformar dados entre classes e sua representação e para salvar documentos em bancos não relacionais.

Criação de uma Fake API:

Quando estamos programando em angular, é comum separar as classes que fazem manipulação de dados em serviços. Vamos criar um serviço para simular localmente a manipulação de dados em Json. Depois vamos incrementar nosso serviço acessando dados de uma API externa, em módulos posteriores nós vamos usar o localstorage e o sqlite para salvar os dados do nosso aplicativo localmente, isso pode ser feito tanto para aplicativos web quanto para mobile.

A API:

Vamos criar um serviço com uma interface simples: salvar e listar pessoas.

O serviço em Angular:Serviços em angular são classes com a convenção de nome service e arquivo nome.service.ts.Crie uma pasta services e adicione o arquivo pessoa.service.ts com o conteúdo:

Aqui nós estamos simulando nossa API. Repare que não usamos http para salvar o item pois nessa simulação não temos como salvá-lo. Porém retornamos um Observable que é o que temos em uma API real, pois o salvamento será assíncrono.

Para a lista, estamos usando o Angular HttpClient, que é recebido no construtor. O angular irá criar e injetar o serviço, já que anotamos a classe com @Injectable() criando um serviço.

Usamos também um modelo que é uma interface para dizermos ao typescript qual o formato dos dados retornados. O angular HttpClient converte automaticamente o json para o objeto, se declararmos o tipo ele vai nos ajudar no autocomplete e no compilador do typescript que irá fazer uma checagem de uso desse objeto para nós (acesso a propriedades, passagem de argumento de funções, etc).

pessoa.mode.ts

Adicione um arquivo json com os dados da pessoa na pasta assets/fakeData/pessoas.json

Agora crie um componente na pasta componentes chamado pessoa-list.component

Vamos fazer um simples for:

E a classe componente: