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 = [Link](myObj);

[Link] = "demo_json.php?x=" + myJSON;

</script>

Aprenderá más sobre la [Link]() 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 = [Link](myJSON);

[Link]("demo").innerHTML = [Link];

</script>

Aprenderá más sobre la función [Link]() 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 = [Link](myObj);

[Link]("testJSON", myJSON);

// Recuperando datos:

text = [Link]("testJSON");
 obj = [Link](text);

[Link]("demo").innerHTML = [Link];

</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:

[Link]()

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
[Link];

<!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 = [Link];

[Link]("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;

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

x = myObj["name"];

[Link]("demo").innerHTML = x;

</script>

</body>

</html>

Los datos se pueden modificar así:

Ejemplo

[Link] = "Gilbert";

<!DOCTYPE html>

<html>

<body>

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

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

var myObj, x;

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

[Link] = "Gilbert";

[Link]("demo").innerHTML = [Link];

</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 = { name: "John", age: 30, city: "New York" };

myObj["city"] = "Caracas";

[Link]("demo").innerHTML = [Link];

</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

 [Link] 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 [Link]() 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 [Link]() para convertir texto en

un objeto de JavaScript:

var obj = [Link]('{ "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 = [Link](txt);

[Link]("demo").innerHTML = [Link] +
", " + [Link];

</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();

[Link] = function() {

if ([Link] == 4 && [Link] == 200)

var myObj = [Link]([Link]);

[Link]("demo").innerHTML =
[Link];

};

[Link]("GET", "json_demo.txt", true);

[Link]();

</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 [Link]() 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>

var xmlhttp = new XMLHttpRequest();

[Link] = function() {

if ([Link] == 4 && [Link] == 200)

var myArr = [Link]([Link]);

[Link]("demo").innerHTML = myArr[0];

};

[Link]("GET", "json_demo_array.txt", true);

[Link]();

</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 = [Link](text);

[Link] = new Date([Link]);

[Link]("demo").innerHTML = [Link] + ", " +

[Link];

</script>

</body>

</html>

O puede usar el segundo parámetro de la [Link]()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 = [Link](text, function (key, value)

if (key == "birth")

return new Date(value);

else

return value;

});

[Link]("demo").innerHTML = [Link] + ", "

+ [Link];

</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 = [Link](text);

[Link] = eval("(" + [Link] + ")");

[Link]("demo").innerHTML = [Link] + ", "

+ [Link]();

</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 [Link]() 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 [Link]().

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 [Link]() para convertirlo en una

cadena.

var myJSON = [Link](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" };

var myJSON = [Link](obj);

[Link]("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 [Link]() para convertirlo en una

cadena.

var myJSON = [Link](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 = [Link](arr);

[Link]("demo").innerHTML = myJSON;
 </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

[Link]() convertirá cualquier fecha en cadenas.

Ejemplo

<!DOCTYPE html>

<html>

<body>

<h2>[Link] convertirá cualquier objeto de fecha en

cadenas.</h2>

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

<script>

var obj = { name: "John", today: new Date(), city: "New York" };

var myJSON = [Link](obj);

[Link]("demo").innerHTML = myJSON;

</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 [Link]() eliminará cualquier función de un objeto

JavaScript, tanto la clave como el valor:

Ejemplo:

<!DOCTYPE html>

<html>

<body>

<h2>[Link] eliminará cualquier función de un objeto.</h2>

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

<script>

var obj = { name: "John", age: function () {return 30;}, city: "New
York" };

var myJSON = [Link](obj);

[Link]("demo").innerHTML = myJSON;

</script>

</body>

</html>

Esto se puede omitir si convierte sus funciones en cadenas antes de

ejecutar la función [Link]().

Ejemplo:

<!DOCTYPE html>

<html>

<body>

<h2>[Link] 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" };

[Link] = [Link]();

var myJSON = [Link](obj);

[Link]("demo").innerHTML = myJSON;

</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 [Link]() 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 = [Link];

[Link]("demo").innerHTML = x;

</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;

myObj = {"name":"John", "age":30, "car":null};

x = myObj["name"];

[Link]("demo").innerHTML = x;

</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;

myObj = {"name":"John", "age":30, "car":null};

for (x in myObj)

[Link]("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;

myObj = {"name":"John", "age":30, "car":null};

for (x in myObj)

[Link]("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"

[Link]("demo").innerHTML +=
[Link].car2 + "<br>";

//or:

[Link]("demo").innerHTML +=
[Link]["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"

[Link].car2 = "Mercedes";

for (i in [Link])

x += [Link][i] + "<br>";
 }

[Link]("demo").innerHTML = x;

</script>

</body>

</html>

También puede usar la notación entre corchetes para modificar un valor

en un objeto JSON:

Ejemplo

[Link]["car2"] = "Mercedes";

Eliminar propiedades de objeto

Utilice la palabra clave delete para eliminar propiedades de un objeto

JSON:

Ejemplo

delete [Link].car2;

<!DOCTYPE html>

<html>

<body>

<p>Cómo eliminar propiedades de 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"

delete [Link].car2;

for (i in [Link])

x += [Link][i] + "<br>";

[Link]("demo").innerHTML = x;

</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,

"cars":[ "Ford", "BMW", "Fiat" ]

};

x = [Link][0];

[Link]("demo").innerHTML = x;

</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>

var myObj, i, x = "";

myObj = {

"name":"John",

"age":30,

"cars":[ "Ford", "BMW", "Fiat" ]

};

for (i in [Link])

x += [Link][i] + "<br>";

[Link]("demo").innerHTML = x;

</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>

var myObj, i, x = "";

myObj = {

"name":"John",

"age":30,

"cars":[ "Ford", "BMW", "Fiat" ]

};

for (i = 0; i < [Link]; i++)

x += [Link][i] + "<br>";

[Link]("demo").innerHTML = x;

</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"] }

for (i in [Link])

x += "<h2>" + [Link][i].name + "</h2>";

 for (j in [Link][i].models)

x += [Link][i].models[j] + "<br>";

[Link]("demo").innerHTML = x;

</script>

</body>

</html>

Modificar valores de matriz

Utilice el número de índice para modificar una matriz:

Ejemplo

[Link][1] = "Mercedes";

<!DOCTYPE html>

<html>

<body>

<p>Cómo modificar un valor de matriz de un objeto JSON.</p>

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

<script>

var myObj, i, x = "";

myObj = {

"name":"John",

"age":30,

"cars":[ "Ford", "BMW", "Fiat" ]

};

[Link][1] = "Mercedes";

for (i in [Link])
 {

x += [Link][i] + "<br>";

[Link]("demo").innerHTML = x;

</script>

</body>

</html>

Eliminar elementos de matriz

Use la palabra clave delete para eliminar elementos de una matriz:

Ejemplo

delete [Link][1];

<!DOCTYPE html>

<html>

<body>

<p>Cómo eliminar propiedades de una matriz.</p>

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

<script>

var myObj, i, x = "";

myObj = {

"name":"John",

"age":30,

"cars": ["Ford","BMW","Fiat"]

delete [Link][1];

for (i in [Link])

x += [Link][i] + "<br>";
 }

[Link]("demo").innerHTML = x;

</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 [Link] () 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>

var xmlhttp = new XMLHttpRequest();

[Link] = function()

if ([Link] == 4 && [Link] == 200)

var myObj = [Link]([Link]);

[Link]("demo").innerHTML = [Link];

};

[Link]("GET", "ejemplo_json.php", true);

[Link]();

</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 [Link]() 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>

var xmlhttp = new XMLHttpRequest();

[Link] = function()
 {

if ([Link] == 4 && [Link] == 200)

var myObj = [Link]([Link]);

[Link]("demo").innerHTML = myObj[2];

};

[Link]("GET", "demo_file_array.php", true);

[Link]();

</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 [Link]() para convertir el objeto JavaScript en JSON:

<!DOCTYPE html>

<html>

<body>
 <h2>Obtenga datos como JSON de un archivo PHP en el
servidor.</h2>

<p>El JSON recibido del archivo PHP:</p>

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

<script>

var obj, dbParam, xmlhttp;

obj = { "limit":10 };

dbParam = [Link](obj);

xmlhttp = new XMLHttpRequest();

[Link] = function()

if ([Link] == 4 && [Link] == 200)

[Link]("demo").innerHTML =
[Link];

};

[Link]("GET", "json_db.php?x=" + dbParam, true);

[Link]();

</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 [Link] () para convertir el JSON 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>

var obj, dbParam, xmlhttp, myObj, x, txt = "";

obj = { "limit":10 };

dbParam = [Link](obj);

xmlhttp = new XMLHttpRequest();

[Link] = function()

if ([Link] == 4 && [Link] == 200)

myObj = [Link]([Link]);

for (x in myObj)

txt += myObj[x].nombres + "<br>";

[Link]("demo").innerHTML = txt;

}
 };

[Link]("GET", "json_demo_db.php?x=" + dbParam, true);

[Link]();

</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>

var obj, dbParam, xmlhttp, myObj, x, txt = "";

obj = { "limit":10 };

dbParam = [Link](obj);

xmlhttp = new XMLHttpRequest();

[Link] = function()

{
 if ([Link] == 4 && [Link] == 200)

myObj = [Link]([Link]);

for (x in myObj)

txt += myObj[x].nombres + "<br>";

[Link]("demo").innerHTML = txt;

};

[Link]("POST", "json_db_post.php", true);

[Link]("Content-type", "application/x-www-
form-urlencoded");

[Link]("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

header("Content-Type: application/json; charset=UTF-8");

$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();

$result = $stmt->get_result();

$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);

?>

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>

var obj, dbParam, xmlhttp, myObj, x, txt = "";

obj = {table: "clientes", limit: 3};

dbParam = [Link](obj);

xmlhttp = new XMLHttpRequest();

[Link] = function()

if ([Link] == 4 && [Link] == 200)

{
 myObj = [Link]([Link]);

txt += "<table border='1'>"

for (x in myObj) {

txt += "<tr><td>" + myObj[x].name + "</td></tr>";

txt += "</table>"

[Link]("demo").innerHTML = txt;

};

[Link]("POST", "json_demo_html_table.php", true);

[Link]("Content-type", "application/x-www-
form-urlencoded");

[Link]("x=" + dbParam);

</script>

</body>

</html>

Archivo Php

<?php

header("Content-Type: application/json; charset=UTF-8");

$obj = json_decode($_POST["x"], false);

$conn = new mysqli("localhost", "root", "", "prueba");

$consulta="SELECT name FROM ".$obj->table." LIMIT ".$obj->limit;

$stmt = $conn->prepare($consulta);

$stmt->execute();

$result = $stmt->get_result();

$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);

?>
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([Link])">

<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)

var obj, dbParam, xmlhttp, myObj, x, txt = "";

obj = { table: sel, limit: 10 };

dbParam = [Link](obj);

xmlhttp = new XMLHttpRequest();

[Link] = function()

if ([Link] == 4 && [Link] == 200)

myObj = [Link]([Link]);

txt += "<table border='1'>"

for (x in myObj)
 {

txt += "<tr><td>" + myObj[x].name + "</td></tr>";

txt += "</table>"

[Link]("demo").innerHTML = txt;

};

[Link]("POST", "json_demo_html_table.php", true);

[Link]("Content-type", "application/x-
www-form-urlencoded");

[Link]("x=" + dbParam);

</script>

</body>

</html>

Archivo PHP

<?php

header("Content-Type: application/json; charset=UTF-8");

$obj = json_decode($_POST["x"], false);

$conn = new mysqli("localhost", "root", "", "prueba");

$consulta="SELECT name FROM ".$obj->table." LIMIT ".$obj->limit;

$stmt = $conn->prepare($consulta);

$stmt->execute();

$result = $stmt->get_result();

$outp = $result->fetch_all(MYSQLI_ASSOC);

echo json_encode($outp);

?>

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>

var obj, dbParam, xmlhttp, myObj, x, txt = "";

obj = { table: "customers", limit: 20 };

dbParam = [Link](obj);

xmlhttp = new XMLHttpRequest();

[Link] = function()

if ([Link] == 4 && [Link] == 200)

myObj = [Link]([Link]);

txt += "<select>"

for (x in myObj)

txt += "<option>" + myObj[x].name;

txt += "</select>"

[Link]("demo").innerHTML = txt;

};

[Link]("POST", "json_demo_html_table.php", true);

[Link]("Content-type", "application/x-
www-form-urlencoded");

[Link]("x=" + dbParam);
 </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)

[Link]("demo").innerHTML = [Link];

</script>

<script src="[Link]"></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 = [Link]("script");

[Link] = "[Link]";

[Link](s);

function myFunc(myObj)

{
 [Link]("demo").innerHTML =
[Link];

</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

header("Content-Type: application/json; charset=UTF-8");

$obj = json_decode($_GET["x"], false);

$conn = new mysqli("localhost", "root", "", "prueba");

$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".

$obj->$limit);

$outp = array();

$outp = $result->fetch_all(MYSQLI_ASSOC);

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