JSON

JSON
JSON: J ava S cript O bject N otation.
JSON es una sintaxis para almacenar e intercambiar datos.
JSON es texto, escrito con notación de objetos JavaScript.
Intercambio de datos
Al intercambiar datos entre un navegador y un servidor, los datos solo

pueden ser texto.
JSON es texto y podemos convertir cualquier objeto JavaScript en JSON

y enviar JSON al servidor.
También podemos convertir cualquier JSON recibido del servidor en

objetos JavaScript.
De esta forma podemos trabajar con los datos como objetos JavaScript,
sin complicados análisis ni traducciones.
Enviando datos
Si tiene datos almacenados en un objeto JavaScript, puede convertir el

objeto en JSON y enviarlo a un servidor:
Ejemplos :
<script>
var myObj = { name: "John", age: 31, city: "New York" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>
Aprenderá más sobre la JSON.stringify() función más adelante en este

tutorial.
Recibiendo información
Si recibe datos en formato JSON, puede convertirlos en un objeto

JavaScript:
<script>
var myJSON = '{"name":"John", "age":31, "city":"New York"}';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>
Aprenderá más sobre la función JSON.parse() más adelante en este

tutorial.
Almacenamiento de datos
Al almacenar datos, los datos deben tener un formato determinado e,

independientemente de dónde elija almacenarlos, el texto siempre es uno de
los formatos legales.
JSON hace posible almacenar objetos JavaScript como texto.
Ejemplo
Almacenar datos en el almacenamiento local :
<script>
var myObj, myJSON, text, obj;
// Almacenamiento de datos:
myObj = {name: "John", age: 31, city: "New York"};
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);
// Recuperando datos:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.city;
</script>
¿Qué es JSON?
 JSON son las siglas de J ava S cript O bject N otation

 JSON es un formato de intercambio de datos ligero
 JSON es "autodescriptivo" y fácil de entender
 JSON es independiente del idioma
JSON usa sintaxis JavaScript, pero el formato JSON es solo texto. El

texto se puede leer y utilizar como formato de datos con cualquier lenguaje de
programación.
El formato JSON fue especificado originalmente por Douglas Crockford .
¿Por qué utilizar JSON?
Dado que el formato JSON es solo texto, se puede enviar fácilmente

desde y hacia un servidor, y cualquier lenguaje de programación puede
utilizarlo como formato de datos.
JavaScript tiene una función incorporada para convertir una cadena,

escrita en formato JSON, en objetos JavaScript nativos:
JSON.parse()
Entonces, si recibe datos de un servidor, en formato JSON, puede

usarlos como cualquier otro objeto JavaScript.
Sintaxis JSON
La sintaxis JSON es un subconjunto de la sintaxis JavaScript.
Reglas de sintaxis JSON
La sintaxis JSON se deriva de la sintaxis de notación de objetos de

JavaScript:
 Los datos están en pares de nombre / valor

 Los datos están separados por comas
 Los tirantes rizados sostienen objetos
 Los corchetes sostienen matrices
Datos JSON: un nombre y un valor
Los datos JSON se escriben como pares de nombre / valor.
Un par nombre / valor consta de un nombre de campo (entre comillas

dobles), seguido de dos puntos, seguido de un valor:
Ejemplo
name: "John"
Los nombres JSON requieren comillas dobles. Los nombres de

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

JavaScript no lo hacen.
JSON: se evalúa en objetos JavaScript
El formato JSON es casi idéntico a los objetos JavaScript.
En JSON, las claves deben ser cadenas, escritas con comillas dobles:
JSON
{ "name":"John" }
En JavaScript, las claves pueden ser cadenas, números o nombres de

identificadores:
JavaScript
{ name:"John" }
Valores JSON
En JSON , los valores deben ser uno de los siguientes tipos de datos:
 una cadena
 un número
 un objeto (objeto JSON)
 una matriz
 un booleano
 nulo
En JavaScript, los valores pueden ser todos los anteriores, más

cualquier otra expresión JavaScript válida, que incluye:
 Una función
 una fecha
 indefinido
En JSON, los valores de cadena deben escribirse con comillas dobles:
JSON
{ "name":"John" }
En JavaScript, puede escribir valores de cadena con comillas

simples o dobles :
JavaScript
{ name:'John' }
JSON utiliza la sintaxis de JavaScript
Debido a que la sintaxis JSON se deriva de la notación de objetos de

JavaScript, se necesita muy poco software adicional para trabajar con JSON
dentro de JavaScript.
Con JavaScript puede crear un objeto y asignarle datos, así:
Ejemplo
var person = { name: "John", age: 31, city: "New York" };
Puede acceder a un objeto de JavaScript como este:
Ejemplo
// returns John
person.name;
<!DOCTYPE html>
<html>
<body>
<p>Access a JavaScript object:</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = { name: "John", age: 30, city: "New York" };
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
También se puede acceder así:
Ejemplo
// returns John
person["name"];
<!DOCTYPE html>
<html>
<body>
<p>Access a JavaScript object using the bracket notation:</p>
<p id="demo"></p>
<script>
var myObj, x;
x = myObj["name"];
</script>
</body>
</html>
Los datos se pueden modificar así:
Ejemplo
person.name = "Gilbert";
<!DOCTYPE html>
<html>
<body>
<p>Modify a JavaScript object:</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj.name = "Gilbert";
</script>
</body>
</html>
También se puede modificar así:
Ejemplo
person["city"] = "Barinas";
<!DOCTYPE html>
<html>
<body>
<p>Modify a JavaScript object using the bracket notation:</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj["city"] = "Caracas";
document.getElementById("demo").innerHTML = myObj.city;
</script>
</body>
</html>
Aprenderá a convertir objetos JavaScript en JSON más adelante en este

tutorial.
Matrices de JavaScript como JSON

De la misma manera que los objetos de JavaScript se pueden usar como
JSON, las matrices de JavaScript también se pueden usar como JSON.
Aprenderá más sobre matrices como JSON más adelante en este

tutorial.
Archivos JSON
El tipo de archivo de los archivos JSON es ".json"
El tipo MIME para el texto JSON es "application / json"
JSON frente a XML
Tanto JSON como XML se pueden utilizar para recibir datos de un
servidor web.
Los siguientes ejemplos de JSON y XML definen un objeto de

empleados, con una matriz de 3 empleados:
Ejemplo JSON
{"employees":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Jones" }
]}
Ejemplo XML
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>
JSON es como XML porque
 Tanto JSON como XML son "autodescriptivos" (legibles por

humanos)
 Tanto JSON como XML son jerárquicos (valores dentro de valores)
 Tanto JSON como XML pueden ser analizados y utilizados por

muchos lenguajes de programación.
 Tanto JSON como XML se pueden recuperar con XMLHttpRequest
JSON es diferente a XML porque
 JSON no usa etiqueta final
 JSON es más corto
 JSON es más rápido de leer y escribir
 JSON puede usar matrices
La mayor diferencia es:
XML debe analizarse con un analizador XML. JSON se puede analizar

mediante una función estándar de JavaScript.
Por qué JSON es mejor que XML
XML es mucho más difícil de analizar que JSON.

JSON se analiza en un objeto JavaScript listo para usar.
Para las aplicaciones AJAX, JSON es más rápido y más fácil que XML:
Usando XML
 Obtener un documento XML
 Utilice XML DOM para recorrer el documento

 Extraer valores y almacenar en variables
Usando JSON
 Obtener una cadena JSON
 JSON.Parse la cadena JSON
Tipos de datos JSON
Tipos de datos válidos
En JSON, los valores deben ser uno de los siguientes tipos de datos:
 una cadena
 un número
 un objeto (objeto JSON)
 una matriz
 un booleano
 Null
Los valores JSON no pueden ser uno de los siguientes tipos de datos:
 Una función
 una fecha
 indefinido
Cadenas JSON
Las cadenas en JSON deben escribirse entre comillas dobles.
Ejemplo:
{ "name":"John" }
Números JSON
Los números en JSON deben ser un número entero o un punto
flotante.
Ejemplo
{ "age":30 }
Objetos JSON
Los valores en JSON pueden ser objetos.
Ejemplo
{
"employee":{ "name":"John", "age":30, "city":"New York" }
}
Los objetos como valores en JSON deben seguir las mismas reglas
que los objetos JSON.
Matrices JSON
Los valores en JSON pueden ser matrices.
Ejemplo
{
"employees":[ "John", "Anna", "Peter" ]
}
JSON booleanos
Los valores en JSON pueden ser verdadero / falso.
Ejemplo
{ "sale":true }
JSON nulo
Los valores en JSON pueden ser nulos.
Ejemplo
{ "middlename":null }
JSON .parse ()
Un uso común de JSON es intercambiar datos hacia / desde un

servidor web.
Al recibir datos de un servidor web, los datos siempre son una

cadena.
Analice los datos con JSON.parse() y los datos se convertirán en un

objeto JavaScript.
Ejemplo: análisis de JSON
Imagina que recibimos este texto de un servidor web:
'{ "name":"John", "age":30, "city":"New York"}'
Utilice la función de JavaScript JSON.parse() para convertir texto en

un objeto de JavaScript:
var obj = JSON.parse('{ "name":"John", "age":30, "city":"New

York"}');
Asegúrese de que el texto esté escrito en formato JSON, o de lo
contrario obtendrá un error de sintaxis.
Utilice el objeto JavaScript en su página:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>Crear objeto a partir de una cadena JSON</h2>
<p id="demo"></p>
<script>
var txt = '{"name":"John", "age":30, "city":"New York"}'
var obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name +
", " + obj.age;
</script>
</body>
</html>
JSON desde el servidor
Puede solicitar JSON desde el servidor mediante una solicitud AJAX
Siempre que la respuesta del servidor esté escrita en formato JSON,

puede analizar la cadena en un objeto JavaScript.
Ejemplo
Utilice XMLHttpRequest para obtener datos del servidor:
<!DOCTYPE html>
<html>
<body>
<h2>Utilice XMLHttpRequest para obtener el contenido de un

archivo.</h2>
<p>El contenido está escrito en formato JSON y se puede convertir

fácilmente en un objeto JavaScript..</p>
<p id="demo"></p>
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML =
myObj.name;
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
</script>
<p>Echa un vistazo a <a href="json_demo.txt"

target="_blank">json_demo.txt</a></p>
</body>
</html>
Json_demo.txt
"name":"John",
"age":31,
"pets":[
{ "animal":"dog", "name":"Fido" },
{ "animal":"cat", "name":"Felix" },
{ "animal":"hamster", "name":"Lightning" }
Matriz como JSON
Cuando se usa JSON.parse() en un JSON derivado de una matriz, el

método devolverá una matriz de JavaScript, en lugar de un objeto de
JavaScript.
Ejemplo
El JSON devuelto por el servidor es una matriz:
<!DOCTYPE html>
<html>
<body>
<h2>Contenido como matriz.</h2>
<p>El contenido escrito como una matriz JSON se convertirá en una

matriz JavaScript.</p>
<p id="demo"></p>
<script>
xmlhttp.onreadystatechange = function() {
var myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
</script>
<p>Echale un vistazo a: <a href="json_demo_array.txt"

target="_blank">json_demo_array.txt</a></p>
</body>
</html>
Json_demo_array.txt
[ "Ford", "BMW", "Audi", "Fiat" ]
Excepciones
Análisis de fechas
Los objetos de fecha no están permitidos en JSON.

Si necesita incluir una fecha, escríbala como una cadena.
Puedes volver a convertirlo en un objeto de fecha más tarde:
Ejemplo
Convierta una cadena en una fecha:
<!DOCTYPE html>
<html>
<body>
<h2>Convertir una cadena en un objeto de fecha.</h2>
<p id="demo"></p>
<script>
var text = '{"name":"Luis", "birth":"1986-12-14", "city":"New

York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " +

obj.birth;
</script>
</body>
</html>
O puede usar el segundo parámetro de la JSON.parse()función

llamado reviver .
El parámetro reviver es una función que verifica cada propiedad, antes

de devolver el valor.
Ejemplo
Convierta una cadena en una fecha, usando la función reviver :
<!DOCTYPE html>
<html>
<body>
<h2>Convertir una cadena en un objeto de fecha.</h2>
<p id="demo"></p>
<script>
var text = '{"name":"Luis", "birth":"1986-12-14", "city":"New

York"}';
var obj = JSON.parse(text, function (key, value)
if (key == "birth")
return new Date(value);
else
return value;
});
document.getElementById("demo").innerHTML = obj.name + ", "

+ obj.birth;
</script>
</body>
</html>
Funciones de análisis
No se permiten funciones en JSON.
Si necesita incluir una función, escríbala como una cadena.
Puedes volver a convertirlo en una función más tarde:
Ejemplo
Convierta una cadena en una función:
<!DOCTYPE html>
<html>
<body>
<h2>Convertir una cadena en una función.</h2>
<p id="demo"></p>
<script>
var text = '{"name":"Luis", "age":"function() {return 30;}",

"city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", "

+ obj.age();
</script>
</body>
</html>
Debe evitar usar funciones en JSON, las funciones perderán su alcance y
tendrá que usarlas eval()para convertirlas nuevamente en funciones.
Soporte del navegador
La función JSON.parse() está incluida en todos los navegadores

principales y en el último estándar ECMAScript (JavaScript).
JSON .stringify ()
Un uso común de JSON es intercambiar datos hacia / desde un servidor

web.
Al enviar datos a un servidor web, los datos deben ser una cadena.
Convierta un objeto JavaScript en una cadena con JSON.stringify().
Cadena de un objeto JavaScript
Imagina que tenemos este objeto en JavaScript:
var obj = { name: "John", age: 30, city: "New York" };
Utilice la función de JavaScript JSON.stringify() para convertirlo en una

cadena.
var myJSON = JSON.stringify(obj);
El resultado será una cadena siguiendo la notación JSON.

myJSON ahora es una cadena y está lista para enviarse a un servidor:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>Cree una cadena JSON a partir de un objeto JavaScript.</h2>
<p id="demo"></p>
<script>
var obj = { name: "Luis", edad: 30, ciudad: "Barinas" };
document.getElementById("demo").innerHTML = myJSON;
</script>
</body>
</html>
Aprenderá a enviar JSON al servidor en el siguiente capítulo.
Cadena de una matriz de JavaScript
También es posible secuenciar matrices JavaScript:
Imagina que tenemos esta matriz en JavaScript:
var arr = [ "John", "Peter", "Sally", "Jane" ];
Utilice la función de JavaScript JSON.stringify() para convertirlo en una

cadena.
var myJSON = JSON.stringify(arr);
El resultado será una cadena siguiendo la notación JSON.

myJSON ahora es una cadena y está lista para enviarse a un servidor:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>Cree una cadena JSON a partir de una matriz de

JavaScript.</h2>
<p id="demo"></p>
<script>
var arr = [ "John", "Peter", "Sally", "Jane" ];
var myJSON = JSON.stringify(arr);
</script>
</body>
</html>
Aprenderá a enviar JSON al servidor en el siguiente capítulo.
Excepciones
Cadena de fechas
En JSON, los objetos de fecha no están permitidos. La función

JSON.stringify() convertirá cualquier fecha en cadenas.
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>JSON.stringify convertirá cualquier objeto de fecha en

cadenas.</h2>
<p id="demo"></p>
<script>
var obj = { name: "John", today: new Date(), city: "New York" };
</script>
</body>
</html>
Puede convertir la cadena de nuevo en un objeto de fecha en el receptor.
Funciones de cadena
En JSON, las funciones no están permitidas como valores de objeto.
La función JSON.stringify() eliminará cualquier función de un objeto

JavaScript, tanto la clave como el valor:
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<h2>JSON.stringify eliminará cualquier función de un objeto.</h2>
<p id="demo"></p>
<script>
var obj = { name: "John", age: function () {return 30;}, city: "New
York" };
</script>
</body>
</html>
Esto se puede omitir si convierte sus funciones en cadenas antes de

ejecutar la función JSON.stringify().
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<h2>JSON.stringify eliminará cualquier función de un objeto.</h2>
<p>Convierta las funciones en cadenas para mantenerlas en el

objeto JSON.</p>
<p id="demo"></p>
<script>
var obj = { name: "John", age: function () {return 30;}, city: "New
York" };
obj.age = obj.age.toString();
</script>
</body>
</html>
Si envía funciones usando JSON, las funciones perderán su alcance y el

receptor tendrá que usar eval () para convertirlas nuevamente en funciones.
Soporte del navegador
La función JSON.stringify() está incluida en JavaScript (ECMAScript) y

es compatible con los principales navegadores.
Objetos JSON
Sintaxis del objeto
Ejemplo
{ "name":"John", "age":30, "car":null }
Los objetos JSON están rodeados por llaves {}.
Los objetos JSON se escriben en pares clave / valor.
Las claves deben ser cadenas y los valores deben ser un tipo de datos
JSON válido (cadena, número, objeto, matriz, booleano o nulo).
Las claves y los valores están separados por dos puntos.
Cada par clave / valor está separado por una coma.
Acceder a los valores de los objetos

Puede acceder a los valores del objeto utilizando la notación de puntos
(.):
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Accede a un objeto JSON usando notación de puntos:</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {"name":"John", "age":30, "car":null};
x = myObj.name;
</script>
</body>
</html>
También puede acceder a los valores del objeto utilizando la notación

entre corchetes ([]):
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Accede a un objeto JSON usando notación de corchetes:</p>
<p id="demo"></p>
<script>
var myObj, x;
x = myObj["name"];
</script>
</body>
</html>
Bucle de un objeto
Puede recorrer las propiedades del objeto utilizando el bucle for-in:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Cómo recorrer todas las propiedades en un objeto JSON.</p>
<p id="demo"></p>
<script>
var myObj, x;
for (x in myObj)
document.getElementById("demo").innerHTML += x + "<br>";
</script>
</body>
</html>
En un bucle for-in, use la notación de corchetes para acceder a
los valores de propiedad :
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Utilice la notación entre corchetes para acceder a los valores de

propiedad.</p>
<p id="demo"></p>
<script>
var myObj, x;
for (x in myObj)
document.getElementById("demo").innerHTML += myObj[x] +
"<br>";
</script>
</body>
</html>
Objetos JSON anidados
Los valores de un objeto JSON pueden ser otro objeto JSON.
Ejemplo
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
}
}
Puede acceder a objetos JSON anidados mediante la notación de puntos

o la notación de corchetes:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Cómo acceder a objetos JSON anidados.</p>
<p id="demo"></p>
<script>
var myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
document.getElementById("demo").innerHTML +=
myObj.cars.car2 + "<br>";
//or:
document.getElementById("demo").innerHTML +=
myObj.cars["car2"];
</script>
</body>
</html>
Modificar valores
Puede usar la notación de puntos para modificar cualquier valor en un

objeto JSON:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Cómo modificar valores en un objeto JSON.</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
myObj.cars.car2 = "Mercedes";
for (i in myObj.cars)
x += myObj.cars[i] + "<br>";
}
</script>
</body>
</html>
También puede usar la notación entre corchetes para modificar un valor

en un objeto JSON:
Ejemplo
myObj.cars["car2"] = "Mercedes";
Eliminar propiedades de objeto
Utilice la palabra clave delete para eliminar propiedades de un objeto

JSON:
Ejemplo
delete myObj.cars.car2;
<!DOCTYPE html>
<html>
<body>
<p>Cómo eliminar propiedades de un objeto JSON.</p>
<p id="demo"></p>
<script>
myObj = {
"name":"John",
"age":30,
"cars": {
"car1":"Ford",
"car2":"BMW",
"car3":"Fiat"
delete myObj.cars.car2;
</script>
</body>
</html>
Matrices JSON
Matrices como objetos JSON
Ejemplo
[ "Ford", "BMW", "Fiat" ]
Las matrices en JSON son casi las mismas que las matrices en
JavaScript.
En JSON, los valores de la matriz deben ser de tipo cadena, número,

objeto, matriz, booleano o nulo .
En JavaScript, los valores de matriz pueden ser todos los anteriores, más
cualquier otra expresión de JavaScript válida, incluidas funciones, fechas
e indefinidas.
Matrices en objetos JSON
Las matrices pueden ser valores de una propiedad de objeto:

Ejemplo
{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}
Acceso a los valores de matriz
Puede acceder a los valores de la matriz utilizando el número de índice:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Acceder a un valor de matriz de un objeto JSON.</p>
<p id="demo"></p>
<script>
var myObj, x;
myObj = {
"name":"John",
"age":30,
};
x = myObj.cars[0];
</script>
</body>
</html>
Bucle a través de una matriz
Puede acceder a los valores de la matriz utilizando un bucle for-in :
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Recorrer una matriz usando un bucle for in:</p>
<p id="demo"></p>
<script>
myObj = {
"name":"John",
"age":30,
};
</script>
</body>
</html>
O puedes usar un bucle for:

Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Bucle a través de una matriz usando un bucle for:</p>
<p id="demo"></p>
<script>
myObj = {
"name":"John",
"age":30,
};
for (i = 0; i < myObj.cars.length; i++)
</script>
</body>
</html>
Matrices anidadas en objetos JSON
Los valores de una matriz también pueden ser otra matriz o incluso otro
objeto JSON:
Ejemplo
myObj = {
"name":"John",
"age":30,
"cars": [
{ "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
{ "name":"BMW", "models":[ "320", "X3", "X5" ] },
{ "name":"Fiat", "models":[ "500", "Panda" ] }
]
}
Para acceder a las matrices dentro de las matrices, use un bucle for-in
para cada matriz:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<p>Recorrer matrices dentro de matrices.</p>
<p id="demo"></p>
<script>
var myObj, i, j, x = "";
myObj = {
"name":"John",
"age":30,
"cars": [
{"name":"Ford", "models":["Fiesta", "Focus", "Mustang"]},
{"name":"BMW", "models":["320", "X3", "X5"]},
{"name":"Fiat", "models":["500", "Panda"] }
x += "<h2>" + myObj.cars[i].name + "</h2>";

for (j in myObj.cars[i].models)
x += myObj.cars[i].models[j] + "<br>";
</script>
</body>
</html>
Modificar valores de matriz
Utilice el número de índice para modificar una matriz:
Ejemplo
myObj.cars[1] = "Mercedes";
<!DOCTYPE html>
<html>
<body>
<p>Cómo modificar un valor de matriz de un objeto JSON.</p>
<p id="demo"></p>
<script>
myObj = {
"name":"John",
"age":30,
};
myObj.cars[1] = "Mercedes";
{
</script>
</body>
</html>
Eliminar elementos de matriz
Use la palabra clave delete para eliminar elementos de una matriz:
Ejemplo
delete myObj.cars[1];
<!DOCTYPE html>
<html>
<body>
<p>Cómo eliminar propiedades de una matriz.</p>
<p id="demo"></p>
<script>
myObj = {
"name":"John",
"age":30,
"cars": ["Ford","BMW","Fiat"]
delete myObj.cars[1];
}
</script>
</body>
</html>
JSON PHP
Un uso común de JSON es leer datos de un servidor web y mostrar los

datos en una página web.
Este capítulo le enseñará cómo intercambiar datos JSON entre el cliente

y un servidor PHP.
El archivo PHP
PHP tiene algunas funciones integradas para manejar JSON.
Los objetos en PHP se pueden convertir a JSON usando la función

PHP json_encode () :
Archivo PHP
<?php
$myObj = new stdClass;
$myObj->name = "Luis Saavedra";
$myObj->age = 28;
$myObj->city = "Caracas";
$myJSON = json_encode($myObj);
echo $myJSON;
?>
El cliente JavaScript
Aquí hay un JavaScript en el cliente, usando una llamada AJAX para
solicitar el archivo PHP del ejemplo anterior:
Ejemplo
Utilice JSON.parse () para convertir el resultado en un objeto JavaScript:
<!DOCTYPE html>
<html>
<body>
<h2>Obtenga datos como JSON de un archivo PHP en el

servidor.</h2>
<p id="demo"></p>
<script>
xmlhttp.onreadystatechange = function()
};
xmlhttp.open("GET", "ejemplo_json.php", true);
xmlhttp.send();
</script>
</body>
</html>
Matriz PHP
Las matrices en PHP también se convertirán en JSON cuando se use la

función PHP json_encode () :
Archivo PHP
<?php
$myArr = array("John", "Mary", "Peter", "Sally");
$myJSON = json_encode($myArr);
echo $myJSON;
?>
El cliente JavaScript
Aquí hay un JavaScript en el cliente, usando una llamada AJAX para

solicitar el archivo PHP del ejemplo de matriz anterior:
Ejemplo
Utilice JSON.parse() para convertir el resultado en una matriz de

JavaScript:
<!DOCTYPE html>
<html>
<body>
<h2>Obtenga datos como JSON de un archivo PHP y conviértalo en

una matriz de JavaScript.</h2>
<p id="demo"></p>
<script>
{
document.getElementById("demo").innerHTML = myObj[2];
};
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();
</script>
</body>
</html>
Base de datos PHP
PHP es un lenguaje de programación del lado del servidor y se puede

utilizar para acceder a una base de datos.
Imagine que tiene una base de datos en su servidor y desea enviarle una
solicitud del cliente en la que solicita las 10 primeras filas en una tabla
llamada "clientes".
En el cliente, cree un objeto JSON que describa el número de filas que

desea devolver.
Antes de enviar la solicitud al servidor, convierta el objeto JSON en una

cadena y envíelo como parámetro a la URL de la página PHP:
Ejemplo
Utilice JSON.stringify() para convertir el objeto JavaScript en JSON:
<!DOCTYPE html>
<html>
<body>
servidor.</h2>
<p>El JSON recibido del archivo PHP:</p>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp;
obj = { "limit":10 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
this.responseText;
};
xmlhttp.open("GET", "json_db.php?x=" + dbParam, true);
xmlhttp.send();
</script>
</body>
</html>
Ejemplo explicado:
 Defina un objeto que contenga una propiedad y un valor "límit".
 Convierta el objeto en una cadena JSON.
 Envíe una solicitud al archivo PHP, con la cadena JSON como parámetro.
 Espere hasta que la solicitud regrese con el resultado (como JSON)

 Muestra el resultado recibido del archivo PHP.
Eche un vistazo al archivo PHP:
Archivo PHP
<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);
$conn = new mysqli("localhost", "root", "", "gimnasio");
$stmt = $conn->prepare("SELECT nombres FROM clientes LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
$result = $stmt->get_result();
$outp = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($outp);
?>
Explicación del archivo PHP:
 Convierta la solicitud en un objeto, usando la función PHP json_decode

() .
 Acceda a la base de datos y complete una matriz con los datos

solicitados.
 Agregue la matriz a un objeto y devuelva el objeto como JSON usando la

función json_encode ()
Recorrer el resultado
Convierta el resultado recibido del archivo PHP en un objeto JavaScript, o
en este caso, una matriz JavaScript:
Ejemplo
Utilice JSON.parse () para convertir el JSON en un objeto JavaScript:
<!DOCTYPE html>
<html>
<body>

servidor.</h2>
<p id="demo"></p>
<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { "limit":10 };
myObj = JSON.parse(this.responseText);
for (x in myObj)
txt += myObj[x].nombres + "<br>";
document.getElementById("demo").innerHTML = txt;
}
};
xmlhttp.open("GET", "json_demo_db.php?x=" + dbParam, true);
xmlhttp.send();
</script>
<p>Intente cambiar la propiedad "límite" de 10 a 5.</p>
</body>
</html>
Método PHP = POST
Al enviar datos al servidor, a menudo es mejor utilizar el método POST

HTTP .
Para enviar solicitudes AJAX utilizando el método POST, especifique el

método y el encabezado correcto.
Los datos enviados al servidor ahora deben ser un argumento para

el método send():
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>Utilice el método HTTP POST para enviar datos al archivo

PHP.</h2>
<p id="demo"></p>
<script>
obj = { "limit":10 };
{
for (x in myObj)
txt += myObj[x].nombres + "<br>";
};
xmlhttp.open("POST", "json_db_post.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-
form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
<p>Intente cambiar la propiedad "límite" de 10 a 5.</p>
</body>
</html>
La única diferencia en el archivo PHP es el método para obtener los

datos transferidos.
Archivo PHP
Utilice $ _POST en lugar de $ _GET:
<?php
$obj = json_decode($_POST["x"], false);
$conn = new mysqli("localhost", "root", "", "gimnasio");
$stmt = $conn->prepare("SELECT nombres FROM clientes LIMIT ?");
$stmt->bind_param("s", $obj->limit);
$stmt->execute();
?>
HTML JSON
JSON se puede traducir fácilmente a JavaScript.
JavaScript se puede utilizar para crear HTML en sus páginas web.
Tabla HTML
Haga una tabla HTML con los datos recibidos como JSON:
<!DOCTYPE html>
<html>
<body>
<h2>Haz una tabla basada en datos JSON.</h2>
<p id="demo"></p>
<script>
obj = {table: "clientes", limit: 3};
{
txt += "<table border='1'>"
for (x in myObj) {
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
txt += "</table>"
};
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-
form-urlencoded");
</script>
</body>
</html>
Archivo Php
<?php
$conn = new mysqli("localhost", "root", "", "prueba");
$consulta="SELECT name FROM ".$obj->table." LIMIT ".$obj->limit;
$stmt = $conn->prepare($consulta);
$stmt->execute();
?>
Tabla HTML dinámica
Cree la tabla HTML según el valor de un menú desplegable:
<!DOCTYPE html>
<html>
<body>
<h2>Haga una tabla basada en el valor de un menú

desplegable.</h2>
<select id="myselect" onchange="change_myselect(this.value)">
<option value="">Elige una opcion:</option>
<option value="customers">Clientes</option>
<option value="products">Productos</option>
<option value="suppliers">Proveedores</option>
</select>
<p id="demo"></p>
<script>
function change_myselect(sel)
obj = { table: sel, limit: 10 };
txt += "<table border='1'>"
for (x in myObj)
{
txt += "<tr><td>" + myObj[x].name + "</td></tr>";
txt += "</table>"
};
xmlhttp.setRequestHeader("Content-type", "application/x-
www-form-urlencoded");
</script>
</body>
</html>
Archivo PHP
<?php
$consulta="SELECT name FROM ".$obj->table." LIMIT ".$obj->limit;
$stmt = $conn->prepare($consulta);
$stmt->execute();
?>
Lista desplegable HTML

Haga una lista desplegable HTML con los datos recibidos como JSON:
<!DOCTYPE html>
<html>
<body>
<h2>Haga una lista desplegable basada en datos JSON.</h2>
<p id="demo"></p>
<script>
obj = { table: "customers", limit: 20 };
txt += "<select>"
for (x in myObj)
txt += "<option>" + myObj[x].name;
txt += "</select>"
};
xmlhttp.setRequestHeader("Content-type", "application/x-
www-form-urlencoded");
</script>
</body>
</html>
JSONP
JSONP es un método para enviar datos JSON sin preocuparse por

problemas entre dominios.
JSONP no usa el objeto XMLHttpRequest
JSONP usa la etiqueta <script> en su lugar.
Introducción a JSONP
JSONP significa JSON con relleno.
Solicitar un archivo de otro dominio puede causar problemas debido a la

política entre dominios.
Solicitar un script externo de otro dominio no tiene este problema.
JSONP usa esta ventaja y solicita archivos usando la etiqueta de

secuencia de comandos en lugar del objeto XMLHttpRequest.
<script src="demo_jsonp.php">
El archivo del servidor
El archivo en el servidor envuelve el resultado dentro de una llamada de

función:
Ejemplo
<?php
$myJSON = '{"name":"John", "age":30, "city":"New York"}';
echo "myFunc(".$myJSON.");";
?>
El resultado devuelve una llamada a una función denominada "myFunc"
con los datos JSON como parámetro.
Asegúrese de que la función exista en el cliente.
La función JavaScript
La función llamada "myFunc" se encuentra en el cliente y está lista para

manejar datos JSON:
Ejemplo
<!DOCTYPE html>
<html>
<body>
<h2>Solicite JSON usando la etiqueta de secuencia de

comandos</h2>
<p>El archivo PHP devuelve una llamada a una función que

manejará los datos JSON..</p>
<p id="demo"></p>
<script>
function myFunc(myObj)
</script>
<script src="jsonp.php"></script>
</body>
</html>
Creación de una etiqueta de secuencia de comandos dinámica

El ejemplo anterior ejecutará la función "myFunc" cuando la página se
esté cargando, según dónde coloque la etiqueta del script, lo cual no es muy
satisfactorio.
La etiqueta de secuencia de comandos solo debe crearse cuando sea

necesario:
Ejemplo
Cree e inserte la etiqueta <script> cuando se haga clic en un botón:
<!DOCTYPE html>
<html>
<body>
<h2>Haga clic en el botón.</h2>
<p>Se crea una etiqueta de script con un atributo src y se coloca

en el documento.</p>
<p>El archivo PHP devuelve una llamada a una función con el

objeto JSON como parámetro.</p>
<button onclick="clickButton()">Haz click en mi!</button>
<p id="demo"></p>
<script>
function clickButton()
var s = document.createElement("script");
s.src = "jsonp.php";
document.body.appendChild(s);
function myFunc(myObj)
{
myObj.name;
</script>
</body>
</html>
Resultado JSONP dinámico
Los ejemplos anteriores siguen siendo muy estáticos.
Haga que el ejemplo sea dinámico enviando JSON al archivo php y deje
que el archivo php devuelva un objeto JSON en función de la información que
obtenga.
Archivo PHP
<?php
$obj = json_decode($_GET["x"], false);
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".

$obj->$limit);
$outp = array();
echo "myFunc(".json_encode($outp).")";
?>
Explicación del archivo PHP:
 Convierta la solicitud en un objeto, usando la función PHP json_decode

() .
 Acceda a la base de datos y complete una matriz con los datos

solicitados.
 Agregue la matriz a un objeto.

 Convierta la matriz en JSON usando la función json_encode().
 Envuelva "myFunc()" alrededor del objeto de retorno.
Ejemplo de JavaScript
La función "myFunc" se llamará desde el archivo php:
Ej ejemplo no termina de Funcionar

JSON

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

JSON

Cargado por

Copyright:

Formatos disponibles

JSON

JSON es una sintaxis para almacenar e intercambiar datos.

JSON es texto, escrito con notación de objetos JavaScript.

Al intercambiar datos entre un navegador y un servidor, los datos solo

JSON es texto y podemos convertir cualquier objeto JavaScript en JSON

También podemos convertir cualquier JSON recibido del servidor en

Si tiene datos almacenados en un objeto JavaScript, puede convertir el

var myObj = { name: "John", age: 31, city: "New York" };

var myJSON = JSON.stringify(myObj);

window.location = "demo_json.php?x=" + myJSON;

Aprenderá más sobre la JSON.stringify() función más adelante en este

Si recibe datos en formato JSON, puede convertirlos en un objeto

var myJSON = '{"name":"John", "age":31, "city":"New York"}';

var myObj = JSON.parse(myJSON);

Aprenderá más sobre la función JSON.parse() más adelante en este

Al almacenar datos, los datos deben tener un formato determinado e,

JSON hace posible almacenar objetos JavaScript como texto.

var myObj, myJSON, text, obj;

myObj = {name: "John", age: 31, city: "New York"};

 JSON son las siglas de J ava S cript O bject N otation

JSON usa sintaxis JavaScript, pero el formato JSON es solo texto. El

El formato JSON fue especificado originalmente por Douglas Crockford .

¿Por qué utilizar JSON?

Dado que el formato JSON es solo texto, se puede enviar fácilmente

JavaScript tiene una función incorporada para convertir una cadena,

Entonces, si recibe datos de un servidor, en formato JSON, puede

La sintaxis JSON se deriva de la sintaxis de notación de objetos de

 Los datos están en pares de nombre / valor

Datos JSON: un nombre y un valor

Los datos JSON se escriben como pares de nombre / valor.

Un par nombre / valor consta de un nombre de campo (entre comillas

Los nombres JSON requieren comillas dobles. Los nombres de

Los nombres JSON requieren comillas dobles. Los nombres de

JSON: se evalúa en objetos JavaScript

El formato JSON es casi idéntico a los objetos JavaScript.

En JSON, las claves deben ser cadenas, escritas con comillas dobles:

En JavaScript, las claves pueden ser cadenas, números o nombres de

En JSON , los valores deben ser uno de los siguientes tipos de datos:

En JavaScript, los valores pueden ser todos los anteriores, más

En JSON, los valores de cadena deben escribirse con comillas dobles:

En JavaScript, puede escribir valores de cadena con comillas

Debido a que la sintaxis JSON se deriva de la notación de objetos de

Con JavaScript puede crear un objeto y asignarle datos, así:

var person = { name: "John", age: 31, city: "New York" };

Puede acceder a un objeto de JavaScript como este:

<p>Access a JavaScript object:</p>

myObj = { name: "John", age: 30, city: "New York" };

<p>Access a JavaScript object using the bracket notation:</p>

myObj = { name: "John", age: 30, city: "New York" };

Los datos se pueden modificar así:

<p>Modify a JavaScript object:</p>

myObj = { name: "John", age: 30, city: "New York" };

También se puede modificar así:

<p>Modify a JavaScript object using the bracket notation:</p>

myObj = { name: "John", age: 30, city: "New York" };

Aprenderá a convertir objetos JavaScript en JSON más adelante en este

Matrices de JavaScript como JSON

Aprenderá más sobre matrices como JSON más adelante en este

El tipo de archivo de los archivos JSON es ".json"

El tipo MIME para el texto JSON es "application / json"

Los siguientes ejemplos de JSON y XML definen un objeto de

JSON es como XML porque

 Tanto JSON como XML son "autodescriptivos" (legibles por