javascript json

Tabla de contenido

JSON es un formato para almacenar y transportar datos.

JSON se utiliza a menudo cuando se envían datos desde un servidor a una web. página.

¿Qué es JSON?

JSON significa JavaScript Object Notation
JSON es un formato de intercambio de datos ligero
JSON es independiente del idioma *
JSON se "autodescribe" y es fácil de entender

* La sintaxis JSON se deriva de la sintaxis de notación de objetos de JavaScript, pero el formato JSON es solo texto. El código para leer y generar datos JSON se puede escribir en cualquier programación. idioma.

Ejemplo JSON

Esta sintaxis JSON define un objeto de empleados: una matriz de 3 registros de empleados (objetos):

Ejemplo JSON

{
"employees":[
  {"firstName":"John", "lastName":"Doe"}, 
  {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]
}

El formato JSON se evalúa como objetos JavaScript

El formato JSON es sintácticamente idéntico al código para crear Objetos JavaScript.

Debido a esta similitud, un programa JavaScript puede convertir fácilmente datos JSON a nativos Objetos JavaScript.

Reglas de sintaxis JSON

Los datos están en pares de nombre/valor.
Los datos están separados por comas.
Las llaves sostienen objetos
Los corchetes contienen matrices

Datos JSON: un nombre y un valor

Los datos JSON se escriben como pares de nombre/valor, al igual que el objeto JavaScript. propiedades.

Un par nombre/valor consta de un nombre de campo (entre comillas dobles), seguido de dos puntos, seguido de un valor:

"firstName":"John"

Los nombres JSON requieren comillas dobles. Los nombres de JavaScript no.

Objetos JSON

Los objetos JSON se escriben entre llaves.

Al igual que en JavaScript, los objetos pueden contener múltiples pares de nombre/valor:

{"firstName":"John", "lastName":"Doe"}

Matrices JSON

Las matrices JSON están escritas entre corchetes.

Al igual que en JavaScript, una matriz puede contener objetos:

"employees":[
   
{"firstName":"John", "lastName":"Doe"}, 
   
{"firstName":"Anna", "lastName":"Smith"}, 
   
{"firstName":"Peter", "lastName":"Jones"}
]

En el ejemplo anterior, el objeto "empleados" es una matriz. Contiene tres objetos.

Cada objeto es un registro de una persona (con nombre y apellido).

Convertir un texto JSON en un objeto JavaScript

Un uso común de JSON es leer datos de un servidor web, y mostrar los datos en una página web.

Para simplificar, esto se puede demostrar utilizando una cadena como entrada.

Primero, cree una cadena de JavaScript que contenga la sintaxis JSON:

let text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Luego, use la función incorporada de JavaScript JSON.parse() para convertir la cadena en un objeto JavaScript:

const obj = JSON.parse(text);

Finalmente, use el nuevo objeto JavaScript en su página:

Ejemplo

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

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

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

<script>
let text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

const obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

Puede leer más sobre JSON en nuestro tutorial de JSON.