{"id":9636,"date":"2020-01-16T16:54:28","date_gmt":"2020-01-16T15:54:28","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-tutoriales\/?p=9636"},"modified":"2023-01-10T13:58:30","modified_gmt":"2023-01-10T12:58:30","slug":"que-es-json","status":"publish","type":"post","link":"\/co\/tutoriales\/que-es-json","title":{"rendered":"\u00bfQu\u00e9 es JSON?"},"content":{"rendered":"<p>Para responder qu&eacute; es <a href=\"https:\/\/www.json.org\/json-es.html\" target=\"_blank\" rel=\"noopener\">JSON<\/a>, debemos empezar por decir que sus siglas en ingl&eacute;s son por JavaScript Object Notation. Se trata de un formato para guardar e intercambiar informaci&oacute;n que cualquier persona pueda leer. Los archivos json contienen solo texto y usan la extensi&oacute;n <strong>.json<\/strong>.<\/p><p>En este art&iacute;culo, aprender&aacute;s para qu&eacute; se utiliza el formato JSON y c&oacute;mo este puede mejorar el rendimiento de tu sitio web.<\/p><h2 class=\"wp-block-heading\" id=\"h-para-que-se-utiliza-un-archivo-json\">&iquest;Para qu&eacute; se utiliza un archivo JSON?<\/h2><p>Volviendo a la pregunta inicial de qu&eacute; es json; JSON es un formato que almacena informaci&oacute;n estructurada y se utiliza principalmente para transferir datos entre un servidor y un cliente.<\/p><p>El archivo es b&aacute;sicamente una alternativa m&aacute;s simple y liviana al XML (Lenguaje de marcado extenso, por sus siglas en ingl&eacute;s) que cuenta con funciones similares.<\/p><p>Los desarrolladores usan JSON para trabajar con <a href=\"\/co\/tutoriales\/que-es-ajax\/\">AJAX<\/a> (JavaScript as&iacute;ncrono y XML, por sus siglas en ingl&eacute;s). Estos formatos funcionan bien juntos para lograr la carga asincr&oacute;nica de los datos almacenados, lo que significa que un sitio web puede actualizar su informaci&oacute;n sin actualizar la p&aacute;gina.<\/p><p>Este proceso es m&aacute;s f&aacute;cil de hacer con JSON que con XML\/RSS. Y hoy, como muchos sitios web est&aacute;n adoptando AJAX, el archivo <strong>.json<\/strong> se ha vuelto muy popular.<\/p><p>Adem&aacute;s, permite a los usuarios solicitar datos de un <a href=\"\/co\/tutoriales\/que-es-un-dominio-web\">dominio<\/a> diferente con un m&eacute;todo llamado <a href=\"https:\/\/es.wikipedia.org\/wiki\/JSONP\" target=\"_blank\" rel=\"noopener\">JSONP<\/a> mediante la aplicaci&oacute;n de etiquetas <strong>&lt;script&gt;.<\/strong> De lo contrario, no puedes transferir dominios cruzados de datos debido a la pol&iacute;tica &ldquo;<a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/Security\/Same-origin_politica\" target=\"_blank\" rel=\"noopener\">mismo-origen<\/a>&rdquo; (same-origin).<\/p><h2 class=\"wp-block-heading\" id=\"h-sintaxis-json\">Sintaxis JSON<\/h2><p>Ya sabes qu&eacute; es un archivo JSON, ahora debes saber que para crear correctamente un archivo <strong>.json<\/strong>, debes seguir la sintaxis correcta.<\/p><p>Hay dos elementos centrales en un objeto JSON: claves (Keys) y valores (Values).<\/p><ul class=\"wp-block-list\">\n<li>Las <strong>Keys<\/strong> deben ser cadenas de caracteres (strings). Como su nombre en espa&ntilde;ol lo indica, estas contienen una secuencia de caracteres rodeados de comillas.<\/li>\n\n\n\n<li>Los <strong>Values<\/strong> son un tipo de datos JSON v&aacute;lido. Puede tener la forma de un arreglo (array), objeto, cadena (string), booleano, n&uacute;mero o nulo.<\/li>\n<\/ul><p>Un objeto JSON comienza y termina con llaves <strong>{}<\/strong>. Puede tener dos o m&aacute;s pares de <strong>claves\/valor<\/strong> dentro, con una <strong>coma<\/strong> para separarlos. As&iacute; mismo, cada key es seguida por <strong>dos puntos<\/strong> para distinguirla del valor.<\/p><p>Como resultado, la sintaxis literal del objeto JSON se ve as&iacute;:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{&ldquo;key&rdquo;:&ldquo;value&rdquo;,&ldquo;key&rdquo;:&ldquo;value&rdquo;,&ldquo;key&rdquo;:&ldquo;value&rdquo;.}<\/pre><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"649\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-value.jpg\" alt=\"Estructura del objeto JSON\" class=\"wp-image-20624\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-value.jpg 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-value-300x254.jpg 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-value-150x127.jpg 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-tipos-de-valores\">Tipos de valores<\/h3><p>Como se mencionaba antes, los valores contienen un tipo de datos JSON v&aacute;lido, como:<\/p><h4 class=\"wp-block-heading\" id=\"h-array\">Array<\/h4><p>Un array (en espa&ntilde;ol conocido como arreglo o vector) es una colecci&oacute;n ordenada de valores. Est&aacute; rodeado de <strong>corchetes []<\/strong> y cada valor dentro est&aacute; separado por una coma.<\/p><p>Un valor de un array puede contener objetos JSON, lo que significa que utiliza el mismo concepto de par clave\/valor. Por ejemplo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"estudiantes\": [\n{\"primerNombre\":\"Tom\", \"Apellido\":\"Jackson\"},\n{\"primerNombre\":\"Linda\", \"Apellido\":\"Garner\"},\n{\"primerNombre\":\"Adam\", \"Apellido\":\"Cooper\"}\n]<\/pre><p>En este caso, la informaci&oacute;n entre corchetes es un array que tiene tres objetos.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"377\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-array.jpg\" alt=\"Estructura del array en JSON\" class=\"wp-image-20625\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-array.jpg 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-array-300x147.jpg 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-array-150x74.jpg 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div><h4 class=\"wp-block-heading\" id=\"h-objeto\">Objeto<\/h4><p>Un objeto contiene una clave y un valor. Hay dos puntos despu&eacute;s de cada clave y una coma despu&eacute;s de cada valor, que tambi&eacute;n distingue a cada objeto. Ambos est&aacute;n entre comillas.<\/p><p>El objeto, como valor, debe seguir la misma regla que un objeto com&uacute;n. Ejemplo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n\"empleados\":{\n   \"nombre\":\"Tom\",\n   \"apellido\":\"Jackson\"\n}\n}<\/pre><p>Aqu&iacute;, <strong>empleados<\/strong> es la clave, mientras que todo lo que est&aacute; dentro de las llaves es el objeto.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"499\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-objeto.jpg\" alt=\"Estructura del objeto en JSON\" class=\"wp-image-20626\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-objeto.jpg 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-objeto-300x195.jpg 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/01\/json-objeto-150x97.jpg 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div><h4 class=\"wp-block-heading\" id=\"h-strings\">Strings<\/h4><p>Un string (conocido en espa&ntilde;ol como cadena de caracteres) es una secuencia establecida de cero o m&aacute;s caracteres Unicode. Est&aacute; encerrado entre dos comillas dobles.<\/p><p>Este ejemplo muestra que<strong> Tom<\/strong> es un string ya que es un conjunto de caracteres dentro de una comilla doble.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\"Primer Nombre\":\"Tom\"<\/pre><h4 class=\"wp-block-heading\" id=\"h-numero\">N&uacute;mero<\/h4><p>El n&uacute;mero en JSON debe ser un <strong>n&uacute;mero entero<\/strong> o un <strong>punto flotante<\/strong>, como<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\"Edad\":\"30\"}<\/pre><h4 class=\"wp-block-heading\" id=\"h-booleano\">Booleano<\/h4><p>Puedes usar <strong>verdadero<\/strong> o <strong>falso<\/strong> como valor, de la siguiente manera:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\"Casado\":\"false\"}<\/pre><h4 class=\"wp-block-heading\" id=\"h-nulo\">Nulo<\/h4><p>Es para mostrar que no hay informaci&oacute;n.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\"Tipo de sangre\":\"null\"}<\/pre><h2 class=\"wp-block-heading\" id=\"h-datos-json-almacenados\">Datos JSON almacenados<\/h2><p>Continuando con esta explicaci&oacute;n acerca de qu&eacute; es JSON, pasemos a hablar de que hay dos formas de almacenar datos JSON: objeto y vector. El primero se ve as&iacute;:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n\"nombre\":\"Tom\",\n\"apellido\":\"Jackson\",\n\"g&eacute;nero\":\"masculino\"\n}<\/pre><p>Las llaves indican que es un objeto JSON. Implica tres pares clave\/valor que est&aacute;n separados por comas.<\/p><p>En cada par, tienes las claves (nombre, apellido y g&eacute;nero) seguidas de dos puntos para distinguirlos de los valores (Tom, Jackson, masculino).<\/p><p>Los valores en este ejemplo son strings. Por eso tambi&eacute;n est&aacute;n entre comillas, similares a las claves.<\/p><h3 class=\"wp-block-heading\" id=\"h-usando-vectores\">Usando vectores<\/h3><p>Otro m&eacute;todo para almacenar datos es un vector (array). &Eacute;chale un vistazo a &eacute;ste ejemplo:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"json\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">{\n\"nombre\":\"Tom\",\n\"apellido\":\"Jackson\",\n\"g&eacute;nero\":\"masculino\",\n\"hobby\":[\"f&uacute;tbol\", \"lectura\", \"nataci&oacute;n\"]\n}<\/pre><p>Lo que diferencia esto del m&eacute;todo anterior es el cuarto par clave\/valor. <strong>Hobby<\/strong> es la clave y hay varios valores (f&uacute;tbol, &#8203;&#8203;lectura, nataci&oacute;n) entre corchetes, que representan un vector.<\/p><p>Puede ser &uacute;til cuando se combina con JSONP para superar el problema entre dominios. Este proceso funciona utilizando lo que se denomina devoluciones de llamada (<strong>callbacks<\/strong>), que solicitar&aacute;n un elemento espec&iacute;fico del vector sin obtener un error &ldquo;del mismo origen&rdquo; (same-origin).<\/p><p>Y afortunadamente, un Array tambi&eacute;n admite <a href=\"\/co\/tutoriales\/bash-for-loop-guia-ejemplos\/\">bucles<\/a>, lo que te permite ejecutar comandos repetidos para buscar m&uacute;ltiples datos, haciendo que el proceso sea m&aacute;s r&aacute;pido y efectivo.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/co\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/co-tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>Como puedes ver, se trata de una herramienta &uacute;til para intercambiar datos. Tiene muchas ventajas:<\/p><ul class=\"wp-block-list\">\n<li>Puedes cargar informaci&oacute;n de forma as&iacute;ncrona para que tu sitio web responda mejor y pueda manejar el flujo de datos con mayor facilidad.<\/li>\n\n\n\n<li>Tambi&eacute;n puedes usarlo para superar problemas de dominio cruzado al intercambiar datos desde otro sitio.<\/li>\n\n\n\n<li>Un archivo JSON es m&aacute;s simple y m&aacute;s liviano que un archivo XML.<\/li>\n<\/ul><p>Esperamos que comprendas mejor qu&eacute; es JSON y puedas administrar tu sitio web de manera m&aacute;s efectiva.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Para responder qu&eacute; es JSON, debemos empezar por decir que sus siglas en ingl&eacute;s son por JavaScript Object Notation. Se trata de un formato para guardar e intercambiar informaci&oacute;n que cualquier persona pueda leer. Los archivos json contienen solo texto y usan la extensi&oacute;n .json. En este art&iacute;culo, aprender&aacute;s para qu&eacute; se utiliza el formato [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/co\/tutoriales\/que-es-json\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":138,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Te Decimos Qu\u00e9 Es JSON y C\u00f3mo Usarlo En Tu Sitio Web %page%","rank_math_description":"JSON se ha hecho famoso por su capacidad de cargar datos de forma asincr\u00f3nica. Lee este tutorial para descubrir qu\u00e9 es JSON y para qu\u00e9 sirve.","rank_math_focus_keyword":"qu\u00e9 es json","footnotes":""},"categories":[8284],"tags":[11886],"class_list":["post-9636","post","type-post","status-publish","format-standard","hentry","category-glosario","tag-que-es-json"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-json","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-json","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/quest-ce-que-json","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-json","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-json","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-json","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-json","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-json","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-json","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-json","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-json","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/o-que-e-json","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-json","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-json","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-json","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-json","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/9636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=9636"}],"version-history":[{"count":10,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/9636\/revisions"}],"predecessor-version":[{"id":27490,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/9636\/revisions\/27490"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=9636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=9636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=9636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}