leer - mostrar datos json javascript
¿Qué es JSON y por qué lo usaría? (15)
A veces se da un tecnicismo donde no se requiere ninguno, y si bien muchas de las respuestas más votadas son precisamente técnicas y específicas, personalmente no creo que sean más fáciles de entender, o sucintas, como lo que se puede encontrar en Wikipedia o en Documentación oficial.
La forma en que me gusta pensar en JSON es exactamente lo que es: un idioma dentro de un mundo de idiomas diferentes. Sin embargo, la diferencia entre JSON y otros idiomas es que "todos" hablan "JSON, junto con su" idioma nativo ".
Usando un ejemplo del mundo real, simulemos que tenemos tres personas. Una persona habla Igbo como su lengua nativa. A la segunda persona le gustaría interactuar con la primera persona, sin embargo, la primera persona habla yoruba como su primer idioma.
¿Qué podemos hacer?
Afortunadamente, la tercera persona en nuestro ejemplo creció hablando en inglés, pero también habla el Igbo y el Yoruba como segundo idioma, por lo que puede actuar como intermediario entre los dos primeros individuos.
En el mundo de la programación, la primera "persona" es Python, la segunda "persona" es Ruby, y la tercera "persona" es JSON, ¡quien por casualidad puede "traducir" Ruby a Python y viceversa! Ahora, obviamente, esta analogía no es perfecta, pero, como alguien que es bilingüe, creo que es una forma fácil de ver cómo JSON interactúa con otros lenguajes de programación.
Busqué en wikipedia, lo busqué en Google y leí la documentación oficial, pero todavía no llegué al punto en que realmente entiendo qué es JSON y por qué lo usaría.
He estado desarrollando aplicaciones usando PHP, MySQL y Javascript / HTML por un tiempo, y si JSON puede hacer algo para facilitar mi vida, mejorar mi código o mejorar mi interfaz de usuario, me gustaría saberlo. ¿Puede alguien darme una explicación sucinta?
El formato JSON se usa a menudo para serializar y transmitir datos estructurados a través de una conexión de red. Se utiliza principalmente para transmitir datos entre un servidor y una aplicación web, y sirve como alternativa a XML.
En resumen, JSON es una forma de serializar de tal manera, que se convierte en código JavaScript. Cuando se ejecuta (con eval o de otro modo), este código crea y devuelve un objeto JavaScript que contiene los datos que serializó. Esto está disponible porque JavaScript permite la siguiente sintaxis:
var MyArray = [ 1, 2, 3, 4]; // MyArray is now an array with 4 elements
var MyObject = {
''StringProperty'' : ''Value'',
''IntProperty'' : 12,
''ArrayProperty'' : [ 1, 2, 3],
''ObjectProperty'' : { ''SubObjectProperty'': ''SomeValue'' }
}; // MyObject is now an object with property values set.
Puede utilizar esto para varios propósitos. Por un lado, es una forma cómoda de pasar datos de su servidor backend a su código JavaScript. Por lo tanto, esto se utiliza a menudo en AJAX.
También puede usarlo como un mecanismo de serialización independiente, que es más simple y ocupa menos espacio que XML. Existen muchas bibliotecas que le permiten serializar y deserializar objetos en JSON para varios lenguajes de programación.
En resumen, es una notación de secuencias de comandos para pasar datos. De alguna manera, una alternativa a XML, que soporta de forma nativa los tipos de datos básicos, matrices y matrices asociativas (pares nombre-valor, llamados Objetos porque eso es lo que representan).
La sintaxis es la que se usa en JavaScript y JSON significa "Notación de Objeto de JavaScript". Sin embargo, se ha vuelto portátil y también se utiliza en otros idiomas.
Un enlace útil para el detalle está aquí:
Es muy sencillo. JSON significa Java Script Object Notation. Piense en ello como una alternativa al uso de XML para transferir datos entre componentes de software.
Por ejemplo, recientemente escribí un grupo de servicios web que devolvieron JSON, y algunos desarrolladores de Javascript escribieron un código que llamaba a los servicios y consumía la información devuelta en ese formato.
JSON (notación de objeto de Javascript) es un formato de datos de peso ligero para el intercambio / transferencia de datos. Su par de valor clave como el JavaScript es. Para la API REST se usa ampliamente para la transferencia de datos del servidor al cliente. Hoy en día muchos de los sitios de redes sociales están usando esto. Aunque no veo esto tan robusto como XML con respecto a los tipos de datos. XML tiene tipos de datos muy ricos y XSD. A JSON le falta algo en esto.
Para la misma cantidad de datos de cadena, JSON será más ligero en comparación con XML, ya que XML tiene todas las etiquetas de apertura y cierre, etc.
JSON es la notación de objetos JavaScript. Es una forma mucho más compacta de transmitir conjuntos de datos a través de conexiones de red en comparación con XML. Sugiero que JSON se use en cualquier aplicación similar a AJAX donde XML sería la opción "recomendada". La verbosidad de XML aumentará el tiempo de descarga y aumentará el consumo de ancho de banda ($$$). Puede lograr el mismo efecto con JSON y su marcado está casi exclusivamente dedicado a los datos en sí y no a la estructura subyacente.
La diferencia entre JSON y la sintaxis convencional sería la siguiente (en Javascript)
Convencional
function Employee(name, Id, Phone, email){
this.name = name;
this.Id = Id;
this.Phone = Phone;
this.email = email;
}
//access or call it as
var Emp = new Employee("mike","123","9373849784","[email protected]");
Con JSON
Si usamos JSON podemos definirlo de forma diferente como
function Employee(args){
this.name = args.name;
this.Id = args.Id;
this.Phone = args.Phone;
this.email = args.email;
}
//now access this as...
var Emp = new Employee({''name'':''Mike'', ''Id'':''123'', ''Phone'':''23792747'', ''email'':''[email protected]''});
Lo importante que debemos recordar es que, si tenemos que crear la clase "modal" o "modal" con 100 elementos sin el método JSON, debemos analizar todo al crear la clase. Pero con JSON podemos definir los objetos en línea solo cuando se define un nuevo objeto para la clase.
Así que esta línea a continuación es la forma de hacer las cosas con JSON (solo una forma simple de definir las cosas)
var Emp = new Employee({''name'':''Mike'', ''Id'':''123'', ''Phone'':''23792747'', ''email'':''[email protected]''});
La respuesta corta común es: si está utilizando AJAX para realizar solicitudes de datos, puede enviar y devolver objetos fácilmente como cadenas JSON. Las extensiones disponibles para el soporte de Javascript toJSON () llama a todos los tipos de javascript para enviar datos al servidor en una solicitud AJAX. Las respuestas AJAX pueden devolver objetos como cadenas JSON que se pueden convertir en objetos Javascript mediante una simple llamada de evaluación, por ejemplo, si la función AJAX devolvió a algunosAjaxFunctionCallReturningJson
"{ /"FirstName/" : /"Fred/", /"LastName/" : /"Flintstone/" }"
podrias escribir en Javascript
var obj = eval("(" + someAjaxFunctionCallReturningJson().value + ")");
alert(obj.FirstName);
alert(obj.LastName);
JSON también se puede utilizar para las cargas útiles del servicio web y otros, pero es realmente conveniente para los resultados AJAX.
- Actualización (diez años después): no hagas esto, usa JSON.parse
Pruebe el siguiente código para analizar su respuesta php json: read.php
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
$.ajax({
url:''index.php'',
data:{},
type:"POST",
success:function(result) {
jsondecoded = $.parseJSON(result);
$.each(jsondecoded, function(index, value) {
$("#servers").text($("#servers").text() + " " + value.servername);
console.log(value.start);
console.log(value.end);
console.log(value.id);
});
},
statusCode: {
404: function() {
alert( "page not found" );
}
}
});
</script>
server.php
<?php
echo ''[{"start":"2017-08-29","end":"2017-09-01","id":"22"},{"start":"2017-09-03","end":"2017-09-06","id":"23"}]'';
?>
Tenemos que hacer un proyecto en la universidad y enfrentamos un problema muy grande, se llama Política de Mismo Origen. Además de otras cosas, hace que su método XMLHttpRequest de Javascript no pueda realizar solicitudes a otros dominios que no sean el dominio en el que se encuentra su sitio.
Por ejemplo, no puede realizar una solicitud a www.otherexample.com si su sitio está en www.example.com. JSONRequest lo permite, pero obtendrá un resultado en formato JSON si ese sitio lo permite (por ejemplo, tiene un servicio web que devuelve mensajes en JSON). Ese es un problema donde podrías usar JSON tal vez.
Aquí hay algo práctico: Yahoo JSON
Todas las respuestas anteriores se centran en aspectos específicos. Así que intentaré explicar el concepto para que puedas entender lo anterior.
¿Qué es JSON? - Como se lo expliqué a mi esposa TM.
Yo: “Es básicamente una forma de comunicarse con alguien por escrito ... pero con reglas.
Esposa: si ....?
YO: Tomemos el inglés como ejemplo: tenemos reglas: paradas completas, comas, corchetes, guiones, apóstrofes, etc. y todos significan cosas diferentes. Básicamente, todos hemos acordado lo que significa una parada completa (es decir, debemos hacer una pausa cuando leemos una).
Esposa: Entonces, ¿estás diciendo que JSON es una forma de escribirle inglés a alguien, pero tiene reglas que ambas partes acuerdan?
Yo: ¡Exactamente! Excepto estas reglas son muy específicas. En el inglés prosaico, las reglas son bastante flexibles: al igual que con la lucha en jaulas: puedes hacer lo que quieras, excepto algunos conceptos básicos (p. Ej., Manipulación de ojos). Por ejemplo, si quisiera decirle al IRS acerca de nuestra familia, podría hacerlo de manera diferente utilizando el inglés prosaico. Note las diferencias en cada forma:
Yo:
• Ejemplo 1: Nuestra familia tiene 4 personas: Tú, yo y 2 niños.
• Ejemplo 2: Nuestra familia: tú, yo, kid1 y kid2.
• Ejemplo 3: Familia: [tú, yo, niño1, niño2]
• Ejemplo 4: tenemos 4 personas en nuestra familia: mamá, papá, niño1 y niño2.
Esposa: Ok me sale la foto. Puedes decir lo mismo de muchas maneras diferentes en inglés. Puede agregar algunas palabras aquí y allá, algunas comas aquí y allá y todos lo entenderán.
Yo: Exactamente. Excepto en JSON, las reglas son muy restrictivas. Solo puedes comunicarte de una determinada manera. Y debe seguir esas reglas para que otra persona lo entienda: corchetes, comas en ciertos lugares.
Esposa: ¿Por qué no usan solo el inglés simple en su lugar?
Yo: Lo harían, pero recuerda que estamos tratando con computadoras. Una computadora es estúpida y no podrá entender oraciones. Así que tenemos que ser realmente específicos cuando las computadoras están involucradas, de lo contrario se confunden. Además, JSON es una forma bastante eficiente de comunicación, por lo que la mayoría de las cosas irrelevantes se recortan, lo cual es bastante importante. Si deseaba comunicar a nuestra familia a una computadora, una forma de hacerlo es así:
{
"Family" : ["Me", "Wife", "Kid1", "Kid2"]
}
...... y eso es básicamente JSON. Pero recuerda, DEBES obedecer las reglas gramaticales de JSON. Si rompe esas reglas, entonces una computadora simplemente no entenderá (es decir, analizará) lo que está escribiendo.
Esposa: Entonces, ¿cómo escribo en Json?
Yo: Lee las respuestas anteriores para detalles específicos. En resumen, se ve obligado a comunicar cosas utilizando pares y matrices de valores clave.
Resumen
JSON es básicamente una forma de comunicar datos a alguien, con reglas muy, muy específicas.
¿Qué es JSON?
La notación de objetos de JavaScript (JSON) es un formato ligero de intercambio de datos inspirado en los literales de objetos de JavaScript.
Los valores JSON pueden consistir en:
objetos (colecciones de pares nombre-valor) matrices (listas ordenadas de valores) cadenas (entre comillas dobles) números verdaderos, falsos o nulos
JSON es lenguaje independiente.
JSON con PHP?
Después de la versión 5.2.0 de PHP, la extensión JSON descodifica y codifica las funcionalidades por defecto.
Json_encode: devuelve la representación JSON de los valores Json_decode: descodifica la cadena JSON Json_last_error: devuelve el último error ocurrido.
Sintaxis y reglas de 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. Las llaves tienen objetos. Los corchetes tienen matrices.
http://www.codingslover.com/2015/05/json-with-php-javascript-and-ajax.html
http://www.codingslover.com/2015/05/json-with-php-javascript-and-ajax.html
JSON (JavaScript Object Notation) es un formato ligero que se utiliza para intercambiar datos. Se basa en un subconjunto del lenguaje JavaScript (la forma en que los objetos están integrados en JavaScript). Como se indica en la MDN , algo de JavaScript no es JSON y otro JSON no es JavaScript.
Un ejemplo de dónde se usa esto son las respuestas de los servicios web. En los días "antiguos", los servicios web utilizaban XML como su formato de datos principal para transmitir datos de vuelta, pero desde que apareció JSON ( el formato JSON está especificado en RFC 4627 por Douglas Crockford ), ha sido el formato preferido porque es mucho más ligero
Puede encontrar mucha más información en el sitio web oficial de JSON .
JSON está construido sobre dos estructuras:
- Una colección de pares de nombre / valor. En varios idiomas, esto se realiza como un objeto, registro, estructura, diccionario, tabla hash, lista con clave o matriz asociativa.
- Una lista ordenada de valores. En la mayoría de los idiomas, esto se realiza como una matriz, vector, lista o secuencia.
Estructura JSON
Aquí hay un ejemplo de datos JSON:
{
"firstName": "John",
"lastName": "Smith",
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": 10021
},
"phoneNumbers": [
"212 555-1234",
"646 555-4567"
]
}
JSON en JavaScript
JSON (en Javascript) es una cadena!
La gente a menudo asume que todos los objetos de Javascript son JSON y que JSON es un objeto de Javascript. Esto es incorrecto.
En Javascript var x = {x:y} no es JSON , este es un objeto Javascript . Los dos no son lo mismo. El equivalente de JSON (representado en el lenguaje Javascript) sería var x = ''{"x":"y"}'' . x es un objeto de tipo cadena, no un objeto por derecho propio. Para convertir esto en un objeto Javascript completamente desarrollado, primero debe analizarlo, var x = JSON.parse(''{"x":"y"}''); , x ahora es un objeto pero esto ya no es JSON.
Cuando trabaje con JSON y JavaScript, puede tener la tentación de usar la función eval para evaluar el resultado devuelto en la devolución de llamada, pero esto no se sugiere ya que hay dos caracteres (U + 2028 y U + 2029) válidos en JSON pero no en JavaScript (lea más de esto here ).
Por lo tanto, siempre se debe intentar usar el script de Crockford que comprueba si hay un JSON válido antes de evaluarlo. El enlace a la explicación del script se encuentra here y aquí hay un enlace directo al archivo js. Cada navegador importante hoy en día tiene su propia implementación para esto.
Ejemplo sobre cómo usar el analizador JSON (con el json del fragmento de código anterior):
//The callback function that will be executed once data is received from the server
var callback = function (result) {
var johnny = JSON.parse(result);
//Now, the variable ''johnny'' is an object that contains all of the properties
//from the above code snippet (the json example)
alert(johnny.firstName + '' '' + johnny.lastName); //Will alert ''John Smith''
};
El analizador de JSON también ofrece otro método muy útil, el de la stringify . Este método acepta un objeto de JavaScript como parámetro y devuelve una cadena con formato JSON. Esto es útil para cuando desea enviar datos al servidor:
var anObject = {name: "Andreas", surname : "Grech", age : 20};
var jsonFormat = JSON.stringify(anObject);
//The above method will output this: {"name":"Andreas","surname":"Grech","age":20}
Los dos métodos anteriores ( parse y stringify ) también toman un segundo parámetro, que es una función que se llamará para cada clave y valor en cada nivel del resultado final, y cada valor será reemplazado por el resultado de su función ingresada. (Más sobre esto here )
Por cierto, para todos ustedes que piensan que JSON es solo para JavaScript, consulte esta publicación que explica y confirma lo contrario.
Referencias
- JSON.org
- Wikipedia
- Json en 3 minutos (Gracias mson )
- Usando JSON con Yahoo! Servicios Web (Gracias gljivar )
- JSON al convertidor de CSV
- Alternativo JSON a CSV Converter
- JSON Lint (validador JSON)
Me gusta JSON principalmente porque es muy conciso . Para el contenido web que puede ser comprimido, este no es necesariamente un gran problema (por eso, x html es tan popular). Pero hay ocasiones en que esto puede ser beneficioso.
Por ejemplo, para un proyecto estaba transmitiendo información que necesitaba ser serializada y transmitida a través de XMPP . Como la mayoría de los servidores limitarán la cantidad de datos que puede transmitir en un solo mensaje, encontré útil usar JSON sobre la alternativa obvia, XML.
Como beneficio adicional, si está familiarizado con Python o Javascript, ya conoce JSON y puede interpretarlo sin mucho entrenamiento.