{"id":794,"date":"2024-07-31T07:18:32","date_gmt":"2024-07-31T05:18:32","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=794"},"modified":"2024-07-31T07:20:49","modified_gmt":"2024-07-31T05:20:49","slug":"12-json-en-javascript","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/javascript\/javascript-practico\/12-json-en-javascript\/","title":{"rendered":"12. JSON en Javascript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.json.org\/json-es.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JSON<\/strong><\/a> es una herramienta muy importante dentro de <strong>Javascript<\/strong>, e incluso no s\u00f3lo dentro de <strong>Javascript<\/strong>. <strong>JSON<\/strong>, por sus siglas en <strong>Javascript<\/strong>, es <strong>Javascript Object Notation<\/strong> (Notaci\u00f3n <strong>de objetos Javascript<\/strong>). Es un formato ligero de <strong>intercambio de datos<\/strong>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">A nosotros como humanos nos es muy f\u00e1cil leer y escribir en formato <strong>JSON<\/strong>, y para las m\u00e1quinas es muy f\u00e1cil interpretarlo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>JSON<\/strong> se ha convertido en un est\u00e1ndar, sirve para conectar diferentes lenguajes y que se puedan entender entre ellos. Es una especie de comunicador \/ traductor entre dos lenguajes distintos.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de <strong>JSON<\/strong> exist\u00eda <strong>XML<\/strong>, que es un lenguaje de marcado muy parecido a <strong>HTML<\/strong>, que antes se usaba para este tipo de intercambios. Con la adopci\u00f3n de <strong>JSON<\/strong>, <strong>JSON<\/strong> ha ido desplazando a <strong>XML<\/strong>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Nota<\/strong>: <strong>JSON<\/strong> no es exclusivo de <strong>Javascript<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un archivo <strong>JSON<\/strong> tiene la extensi\u00f3n .<strong><em>js<\/em><\/strong>, y su sintaxis es muy parecida a la de un objeto <strong>Javascript<\/strong>, donde todas las <strong>propiedades<\/strong> deben ir con <strong>dobles comillas<\/strong>, no acepta <strong>comillas simples<\/strong>, ni <strong>template strings<\/strong>. Igualmente, los valores de las propiedades tienen que ir con dobles comillas, los <strong>booleans, nulls<\/strong> y los <strong>n\u00fameros<\/strong> no es necesario que vayan entre <strong>comillas<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">Si nos vamos a la documentaci\u00f3n de <a href=\"https:\/\/developer.mozilla.org\/es\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>MDN<\/strong><\/a>, y buscamos <strong>JSON<\/strong>, vemos que tiene dos m\u00e9todos.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/JSON\/parse\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>JSON.parse()<\/em><\/strong><\/a>: analiza una notaci\u00f3n <strong>JSON<\/strong> y la convierte a un tipo de dato que <strong>Javascript<\/strong> valide, como un <strong>objeto<\/strong>, un <strong>array<\/strong>, un <strong>boolean<\/strong>&#8230;<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/JSON\/stringify\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>JSON.stringify()<\/em><\/strong><\/a>: convierte un <strong>objeto<\/strong> o un valor v\u00e1lido de <strong>Javascript<\/strong> a notaci\u00f3n <strong>JSON<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm con JSON.parse()<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Convierte las <strong>cadenas de texto<\/strong> (est\u00e1n entre comillas) a <strong>objetos<\/strong> <strong>Javascript<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">console.log(JSON.parse(\"{}\")); \/\/ Lo convierte a objeto\nconsole.log(JSON.parse(\"[1,2,3]\")); \/\/ Lo convierte a array\nconsole.log(JSON.parse(\"true\")); \/\/ Lo convierte a true\nconsole.log(JSON.parse(\"19\")); \/\/ Lo convierte a number\nconsole.log(JSON.parse(\"null\")); \/\/ lo convierte a null<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm con JSON.stringify()<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Convierte los tipos de datos pasados (<strong>arrays<\/strong>, <strong>strings<\/strong>, <strong>numbers<\/strong>&#8230;) en <strong>notaci\u00f3n JSON<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">console.log(JSON.stringify({})); \/\/ Lo convierte en cadena\nconsole.log(JSON.stringify([1,2,3])); \/\/ Lo convierte en cadena\nconsole.log(JSON.stringify(true)); \/\/ Lo convierte en cadena<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>JSON es una herramienta muy importante dentro de Javascript, e incluso no s\u00f3lo dentro de Javascript. JSON, por sus siglas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":620,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-794","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"JSON es una herramienta muy importante dentro de Javascript, e incluso no s\u00f3lo dentro de Javascript. JSON, por sus siglas [&hellip;]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=794"}],"version-history":[{"count":4,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/794\/revisions"}],"predecessor-version":[{"id":799,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/794\/revisions\/799"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/620"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}