[tutorial] json em javascript

Postagem de conteúdo sobre programação javascript
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 739
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] json em javascript

Post by Kodo no Kami » Sun May 03, 2015 9:29 am

e ae galera faz um tempinho sem escrever tutorial, nesse tutorial vou ensinar como usar json em javascript, o json é muito usado para arquivos de configuração ou para criar estruturas em forma de hierarquia que vao ser usado em uma pagina tipo o xml tanto que é possivel converte o xml em json e vice versa, a vantagem do json é que nao fica dados tao disperso igual o xml, para usar json no javascript usamos a classe JSON para converte uma string em um objeto e assim usar os atributos do objeto para manipular os valores equivalente na estrutura json, a estrutura json separa cada segmento com chaves entao cada par de chaves dentro da outra é uma sub chave da anterior, e existe um par de chaves que é a raiz onde as demais sao sub chaves ou atributo dela (igual o xml que existe a tag principal root)

Code: Select all

{}
os atributos deve conter um nome e um valor (o valor pode ser um conjunto de valores ou uma sub chave da mesma vamos ver isso mais para frente), no caso o nome e o valor é separado por dois pontos (o nome deve estar entre aspas o valor tambem caso seja um texto e nao numero)

Code: Select all

{ "nome" : "kodo no kami" , "idade" : 22 }
embora eu to escrevendo um na frente do outro podemos pular linha ou usar espaço

Code: Select all

{ 
   "nome" : "kodo no kami",
   "idade" : 22
}
em javascript o codigo anterior seria interpretado e acessado dessa forma (mais para frente vamos ver como usar o json em javascript primeiro temos que entender como funciona a estrutura json)

Code: Select all

objeto.nome;
objeto.idade;
podemos usar um conjunto de valores para isso colocamos ele entre colchetes seprado por virgula

Code: Select all

{
"nomes" : ["kodonokami","hfts315","flavio"]
}
em javascript para acessar os valores seria o mesmo que uma array

Code: Select all

objeto.nomes[0];
objeto.nomes[1];
objeto.nomes[2];
podemos criar uma sub-chave para segmentar novos nomes e valores dentro daquela chave

Code: Select all

{
"kodo" : {
   "nomereal" : "flavio",
   "antigonick" : "hfts315"
   }
}
em javascript para acessar basta acessar a chave seguido da sub-chave

Code: Select all

objeto.kodo.nomereal;
objeto.kodo.antigonick;
podemos criar quantas subchaves a gente quiser

Code: Select all

{
"pais" : {
   "brasil" : {
      "estado" : {
          "rio" : 21,
           "minas" : 31
      }
   }
}
}
e para acessar mesma coisa so ir acessando todas as chaves ate o atributo

Code: Select all

objeto.pais.brasil.estado.rio;
objeto.pais.brasil.estado.minas;
tambem podemos cria uma chave dentro de um conjuto de valores

Code: Select all

{
"id" : [{
   "nick" : "kodo no kami",
   "permi" : 1,
}] 
}
para acessar ficaria assim

Code: Select all

objeto.id[0].nick;
objeto.id[0].permi;
bom galera o json é basicamente isso agora como acessar ele via javascript, para começar criamos uma pagina basica

Code: Select all

<html>
<body>
<script type="text/javascript">
</script>
</body>
</html>
agora criamos uma variavel e atribuimos a ela uma string que seria o nosso json

Code: Select all

<html>
<body>
<script type="text/javascript">
   var kodo = '{ "member" : [{ "nome": "kodo no kami" }] }';
</script>
</body>
</html>
agora usamos o objeto JSON e o metodo parse passamos como argumento a nossa string com o json nela, e atribuimos ele para uma nova variavel para manipular ele

Code: Select all

<html>
<body>
<script type="text/javascript">
   var kodo = '{ "member" : [{ "nome": "kodo no kami" }] }';
   var kami = JSON.parse(kodo);
</script>
</body>
</html>
pronto agora so usar os atributos dentro da variavel

Code: Select all

<html>
<body>
<script type="text/javascript">
   var kodo = '{ "member" : [{ "nome": "kodo no kami" }] }';
   var kami = JSON.parse(kodo);
   document.write(kami.member[0].nome);
</script>
</body>
</html>
caso voce precise acessar um arquivo json externamente que nao ta pagina voce pode usar XMLHttpRequest ou iframe ^^

by kõdo no kami
Image

que desagradavel ~ mirai kuriyama

Post Reply

Return to “Javascript”