Introducción a JSON, sintaxis y ejemplos

JSON es una notación de objetos basada en JavaScript, utiliza una sintaxis que nos permite crear objetos de manera rapida y simple, estos objetos pueden ser utilizados de la manera que queramos y la notación se utiliza muy comúnmente para crear servicios REST, objetos, e incluso fue adoptada por algunas bases de datos como lo es MongoDB. A continuación el siguiente video tutorial demuestra una introducción. Codigo ejemplo puedes encontrarlo posteriormente.

Sintaxis de JSON

Para escribir JSON debemos tener en cuenta lo siguiente:
La creación de los objetos JSON implica escribir datos, para ello:

  • Losdatos estan separados por comas.
  • los datos se escriban en pares, siendo primero el nombre o atributo del mismo y luego el valor del dato.
  • Los objetos JSON estan rodeados por llaves “{}”
  • Llaves cuadradas [] guardan arreglos, incluyendo otros objetos JSON

Ejemplo de un objeto JSON que guarda un usuario y password:

var objetoJSON = {"usuario":"user","password":"123456"};

 

Video tutorial:


Codigo fuente:

<!DOCTYPE  html>
<html>
<head>
	<meta charset="UTF-8">
</head>
<body>
	<section id="tests">
		<h1>Tutorial JSON (JavaScript Object Notation)</h1>
		<div id="content" >

		</div>
	</section>
	<script type="text/javascript">

	var objetos = {"Personas":[
			{"nombre":"Jorge","edad":23},
			{"nombre":"Carlos","edad":17}
		]};

	document.getElementById('content').innerHTML = objetos.Personas[1].nombre ;
	/*Declarar un objeto JSON con una funcion en un atributo
	 notese el uso de "this" que hace referencia a el objeto en sí, es decir a persona*/
	var persona = {"name":"Jorge","edad":23,
				  "avisar":function(){alert("Hola soy "+this.name);}
				 };

	persona.avisar();
	</script>
</body>	
</html>

 

Acerca del autor:

Mi nombre es Jorge Villalobos, soy Colombiano de nacimiento y resido en México desde 2005,actualmente soy el creador de codigoprogramacion.com Soy ingeniero en tecnologías de información y comunicaciones y trabajo de tiempo completo desarrollando aplicaciones web. En general me considero un tipo normal, me gusta salir, divertirme, y uno de mis hobbies es programar y hacer tutoriales para compartir conocimiento, me gusta la pizza, el ajedrez y tomar una que otra cerveza los fines de semana. Espero que este proyecto ayude a ayudar a los demás.

Twitter del autor:

20 comments

  1. Lourdes says:

    Excelente tutorial de Json muchas gracias por compartir, me sirvio

  2. jose david says:

    Que debo hacer si quiero enviar datos que están en un array en una clase PHP
    hacia una vista que recibe datos a través de AJAX

  3. Castro Medrano says:

    La explicacion Que Ud. Realiza esta muy clara: pero al combinar con Javascript viene ña conjucion, en especial cuando Ud. combina y Crea Clases, etc. Por otro Lado para accesar a la Base de datos con JavaScript hasta el momento tengo la rutina a MYsql, Pero no tengo como se accesa a Oracle, SQL Server, etc. Por lo que le pido accesar mediante JSON.
    Saludos

  4. jose luis says:

    podrias hacer un tutorial de como crear de un JSON a partir de una consulta en SQL, me podrias apoyar con eso por favor

  5. ADRIANA says:

    Hola amigo me dejaron una tarea en donde debo implementar ayudas en cada una de las secciones que tiene mi proyecto pero debo implementar a travez de JSON como hago para que JSON puede recibir 2 objetos distintos necesito ayuda… de Antemano Muchas Gracias… Espero tu Respuesta…

  6. Dardo says:

    Gracias por compartir el conocimiento. Me fué muy útil tu explicación. Saludos.

  7. juan arminio says:

    Buenosa dias, por favor algun ejemplo de json para leer un codigo de producto en una base de datos y enseñar resultado en php por favor, gracias.

  8. skra says:

    tengo una pregunta tengo un archivo json que ya tiene valores establecidos como puedo leer esos datos son porcentajes estoy comenzando a usar javascript y json gracias por la atención

  9. asdas says:

    asdasdsadasdsad

  10. Windows says:

    Gracias por la ayuda :)

  11. pablo aransaez pavez says:

    Gracias.. es muy buena tu ayuda..

  12. luis says:

    Esta muy biien la pagina muchas gracias me sirve de mucho, Saludos

  13. pamela says:

    Hola esta muy bien tu pagina, quisiera saber si podrias hacer un tutorial tengo que hacer un memorama pero desde java lo estoy haciendo en netbeans, pero esa info de los text área y las imágenes se deben de guardar en un json object y un json array, para después ser procesado por JavaScript, quiero saber como se maneja, si me puedes ayudar con eso por fas.

  14. pamela says:

    Hola esta muy bien la pagina, quisera saber si podrias subir un tutorial tengo que hacer una interfaz en java la estoy haciendo desde netbeans, y los valores que vaya poniendo en un textarea va a a ser texto e imágenes, al momento de guardarlo se tiene que guardar en un json es para un memorama.
    ese json debe ser leído con JavaScript y debe de poder desordenar las imágenes cuando se viasualize en el navegador.
    espero me puedas subir ese tutorial quiero saber como se manjena.

  15. Daniel Ramirez says:

    hola jorge, me podrias ayudar con una grandisima duda que tengo?.
    mira el caso es lo siguiente, en la escuela nos dejaron hacer un ejercicio que combina php con json , js y un poco de ajax, el rollo es que debo de hacer una consulta con php y crear objeto de json para almacenar los resultados de la consulta con el codigo json_encode($variable);

    entonces despues de eso en mi plantilla de js debo obtener ese objeto de json mediante el codigo $.getJSON(“NomDelPHP”, function());
    tenguna funcion que se llama listarDatos y contiene lo siguiente

    listarDatos: function (o) {
    ‘use strict';
    var i, salida;
    console.log(o);
    //alert(o.status);
    //alert(o.datos.length);
    salida = ”;
    for (i = 0; i < o.usuario.length; i += 1) {
    salida += o.usuario[i].Id + ' ';
    salida += o.usuario[i].Nombre + '';
    salida += o.usuario[i].Correo + ”;
    salida += o.usuario[i].Telefono + ”;
    }

    $(‘#Contenedor’).html(salida);

    }

    el php funciona bien, pero tengo problemas al obtener el json y querer mostrarlo en pantalla

    tengo una base de datos local que es la siguiente
    Nombre BD : j-son
    tabla : Usuario
    campos : Id, Nombre, Correo, Telefono.
    si me pudieras hechar una mano o darme un norte de como se usa el getJSON
    Gracias de antemano.

  16. Eres un muy buen capacitador en estos y otros temas muchas gracias por tu información.

  17. antonio gomez lopez says:

    Hola jorge, he revisado tu sitio y esta muy bien, soy recien egresado de la ing. en TIC.
    podrias ayudarme a realizar un ejemplo de envio de email con php. los he realizado y los he subido a los hosting que hay gratis, hago las pruebas pero no me llegan lo emails. podras ayudarme con eso.

    • ISRAEL says:

      HOLA ANTONIO, TENIA EL MISMO PROBLEMA AL QUERER ENVIAR LOS CORREOS CON LA FUNCION mail DE PHP, NO SE SI AFECTE ALGO QUE TU HOSTING SEA GRATUITO, PERO BUENO, LA QUE AFECTABA A MI CODIGO ERA QUE EL ENVIO DEL CORREO LO HACIA A UN CORREO DE HOTMAIL, LO QUE TE ACONSEJO ES PROBAR CON ALGUN CORREO D GMAIL, A MI ME FUNCIONO

Leave a Reply

Your email address will not be published. Required fields are marked *