JSON

JSON

JSON

Historia de JSON

JSON é o acrónimo de JavaScript Object Notation: é un formato de texto sinxelo para o intercambio de datos. Podes ler a súa especificación para coñecer todos os detalles do mesmo, ou consultar o resumo na súa web.

JSON é texto plano (fácil de ler e escribir para os humáns) escrito na notación dos obxectos JavaScript, usado para enviar datos entre equipos, e é indepedente da linguaxe.

A sintaxe de JSON syntax é derivada da notación dos obxectos JavaScript, pero o formato JSON é simplemente texto. O código para ler e xenerar JSON existe en moitas linguaxes.

Estrutura e sintaxe

Tipos de datos

Os tipos de datos disponibles con JSON son:

• Números: Permítense números negativos e opcionalmente poden conter parte fraccional separada por puntos. Exemplo: 123.456
• Cadeas: Representan secuencias de cero ou máis caracteres. Póñense entre dobre comilla e permítense cadeas de escape. Exemplo: "Ola"
• Booleanos: Representan valores booleanos e poden ter dous valores: true e false
• null: Representan o valor nulo.
• Array: Representan unha lista ordeada de cero ou más valores os cales poden ser de calquer tipo. Os valores se separan por comas e o vector métese entre corchetes. Exemplo ["xoan","xose","xavier"]
• Obxectos: Son coleccións non ordeadas de pares da forma <nome>:<valor> separados por comas e postas entre chaves. O nome ten que ser unha cadea entre comillas dobres. O valor pode ser de calquera tipo.

Exemplo:

{
  "departamento":9,
  "nomedepto":"Ventas",
  "director": "Ana López",
  "empregados":[
    {
      "nome":"Pepe",
      "apelido":"Fernández"
    },{
      "nome":"Antía",
      "apelido":"Chousa"
    } 
  ]
}

Estrutura de datos e como ler a información

Reglas de oro con JSON

Hai tres estruturas:

1. Obxectos JSON
2. Obxectos JSON nun array
3. Anidamento de obxectos JSON

Obxectos JSON

var pepe = {
  "nome" : "Pepe",
  "idade" : "39",
  "web" : "aclasedopeque.com"
};

Isto crea un obxecto que poderemos acceder usando a variable pepe. Dentro do obxecto podemos ter un numero de pares clave-valor coma neste exemplo, as que poderemos acceder fora do obxecto JSON así:

document.writeln("O nome é:  " +pepe.nome);
document.writeln("A súa idade é: " + pepe.idade);
document.writeln("A súa web é : "+ pepe.web);

Obxectos JSON nun array

Estrutura JSON

No exemplo anterior almacenóuse información dunha persona nun obxecto JSON. Supoñamos que queremos almacenar a información de máis dunha persona: neste caso empregaremos un array de obxectos.

var alumnado = [{
   "nome" : "Pepe",
   "idade" :  "39",
   "sexo" : "home"

},
{
   "nome" : "Pedro",
   "idade" : "32",
   "sexo" : "home"

},
{
   "nome" : "Paula",
   "idade" : "27",
   "sexo" : "muller"
}];

Podes acceder a información fora do array así:

document.writeln(alumnado[0].idade); //saída: 39
document.writeln(alumnado[2].nome); //saída: Paula

Anidamento de obxectos JSON

Outro xeito de facer o visto nos pasos anteriores:

var alumnado = {
  "pepe" : {
  "nome" : "Pepe",
  "idade" :  "39",
  "sexo" : "home" 
},

"pedro" : {
  "nome" : "Pedro",
  "idade" : "32",
  "sexo" : "home"
},

"pau" : {
  "nome" : "Paula",
  "idade" : "27",
  "sexo" : "muller"
}
}

Para acceder a información dos obxectos anidados:

document.writln(alumnado.pepe.idade); //saída: 39
document.writeln(alumnado.pau.sexo); //saída: muller

Comparativa con XML

Imos comparar como se visualizan JSON e XML nun exemplo con catro rexistros de estudantes.

JSON style:

{"alumnado":[
   {"nome":"Ana", "idade":"23", "cidade":"Lugo"},
   {"nome":"Pedro", "idade":"28", "cidade":"Ferrol"},
   {"nome":"Lois", "idade":"32", "cidade":"Vigo"},
   {"nome":"Elena", "idade":"28", "cidade":"Cedeira"}
]}

XML style:

<alumnado>
  <alumno>
    <nome>Ana</nome> <idade>23</idade> <cidade>Lugo</cidade>
  </alumno>
  <alumno>
    <nome>Pedro</nome> <idade>28</idade> <cidade>Ferrol</cidade>
  </alumno>
  <alumno>
    <nome>Lois</nome> <idade>32</idade> <cidade>Vigo</cidade>
  </alumno>
  <alumno>
    <nome>Elena</nome> <idade>28</idade> <cidade>Cedeira</cidade>
  </alumno>
</students>

Coma se pode ver JSON é máis lixeiro comparado con XML. Tamén JSON pode tomar vantaxa do uso de arrays, opción que non é posible con XML.

Unha das vantaxes que tamén se adoitan indicar e que non é preciso contar con un XML parser para tratar os datos en formato JSON. JavaScript ten built in funcións para convertir cadeas JSON en obxectos JavaScript:

JSON.parse()

E para convertir un obxecto nunha cadea JSON:

JSON.stringify()

JSON en acción con JavaScript

Como ler data dun ficheiro json e convertilo nun obxecto JavaScript

Hai dous xeitos:

1. Usando a función eval (non recomendado por motivos de seguridade xa que datos maliciosos poden ser enviados do servidor ó cliente e eval no script do cliente tería efectos perniciosos)
2. Usando o JSON parser: sen problemas de seguridade e máis rápido que eval. Optaremos por esta posibilidade.

var pepe = {
"nome" : "Pepe Chousa",
"idade" : "39",
"web" : "aclasedopeque.com"
};

Convertiremos o obxecto JSON nun obxecto javascript usando o JSON parser:

var myJSObject = JSON.parse(pepe);

Como convertir obxectos JavaScrit en texto JSON

Co método stringify:

var jsonText= JSON.stringify(myJSObject);

Exercicios

• Ler ficheiro JSON mediante AJAX

Referencias

• Learn JSON in 10 minutes
• JSON in w3schools
• JSON quick guide - tutorialspoint
• ¿Qué es JSON? | Oracle España

Como amosar programáticamente JSON

• How to fetch data from JSON file and display in HTML table using jQuery
• Display JSON data in HTML table using JavaScript - YouTube
• jQuery.getJSON() | jQuery API Documentation
• Tutorial básico programador web: Ajax desde cero
• A curated list of awesome JSON datasets that don't require authentication.
• JSON editing in Visual Studio Code
• JSON Data Set Sample
• How to Fetch and Display JSON Data in HTML Using JavaScript – HowToCreateApps
• Display JSON Data in HTML Page (With Examples)