JSON (01) Sintaxis

Vamos a comenzar a ver como se declara un objeto JSON…

JSON se declara con notación javascript, por lo que no es muy difícil de entender para aquellos que tienen unos conocimientos mínimos de desarrollo web, pero cumple con una serie de especificaciones:

  • Los datos aparecen en pares de nombre/valor
  • Los datos están separados por comas ,
  • Cada para viene entre llaves {}
  • Los arrays aparecen entre corchetes []

Valores

JSON puede incluir varios tipos de valores como:
  • Un número, ya sea un entero o decimal
  • Una cadena o string entre comillas
  • Un booleano (true o false)
  • Un nuevo objeto en su interior, entre llaves
  • Un array en su interior, entre corchetes
  • valor nulo (null)

Un ejemplo completo de JSON

En el siguiente ejemplo vamos a observar como se declara JSON, como se recoge y como se muestra por pantalla, es un ejemplo muy sencillo que puede servirte de ayuda, y si estas siguiendo el tutorial de AngularJS, podrás ver como se pueden hacer multitud de cosas con estas dos tecnologías unidas.
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var notas = [
    {
    "nombre":"Paco Perez",
    "curso":"4º",
    "nota":"6.25"
    }, 
    {
    "nombre":"Manuel Rodriguez",
    "curso":"3º",
    "nota":"5.00"
    },
    {
    "nombre":"María",
    "curso":"López",
    "nota":"7.15"
    },
];

document.getElementById("demo").innerHTML =
notas[0].nombre + " " + notas[0].curso + " " + notas[0].nota;
</script>

</body>
</html>

En este ejemplo vemos como en el script se declara el JSON como un array de javascript que tiene varios objetos (tres en nuestro caso), y que cada uno tiene tres pares nombre/valor, en nuestro caso, nombre curso y nota.

A continuación se introduce en el html la “consulta” al JSON, donde se le indica a javascript que del array notas tome la posición cero y sus propiedades.Esto nos da como resultado:

Paco Perez 4º 6.25