Jump to content

Como acessar o JSON utilizando JavaScript


Leonardo

Postagens Recomendadas

Olá Dev como estão? 

Para este post, estaremos descrevendo um dos modelos para que posa acessar os campos de um JSON utilizando JavaScript.
O objetivo deste post é mostrar uma forma simples e rápida de fazermos essa tarefa.

Abaixo temos um JSON de envio retornado pela nossa API de pagamentos relacionado ao cadastro de uma conta:

{
	"accounts": [
		{
			"bankCode": "104",
			"accountHash": "mwauoMy-FP",
			"agency": "9999",
			"agencyDigit": "",
			"accountNumber": "1111",
			"accountNumberDigit": "",
			"accountDac": "",
			"convenioAgency": "",
			"convenioNumber": "19191919",
			"remessaSequential": 1
		}
	]
}

Para o exemplo acima, temos apenas um nível de acesso em nosso JSON, desta forma podemos navegar entre os campos para estarmos recuperando o valor desejado. 

Como exemplo, estaremos recuperando o valor do campo accountHash referente a identificação única da nossa conta.

A primeira etapa é recuperarmos toda a resposta devolvida pela API. 

const response = await fetch("https://staging.pagamentobancario.com.br/api/v1/account", options)
const retorno = await response.json()

Tendo todo o conteúdo do retorno, podemos filtrar os campos que desejamos utilizando o acesso das propriedades.

let accountHash = retorno.accounts[0].accountHash

Basicamente no exemplo estamos criando uma variável que receberá o valor de identificação da conta. Para isso os campos utilizados se referem á:

  • retorno: Contém todos os dados de retorno da requisição; 
  • accounts[0]: Estará pegando o objeto no índice 0 em nosso Array
  • accountHash: filtra somente o valor contido no campo: Exemplo retornado: mwauoMy-FP

 

Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora


×
×
  • Create New...