{"id":454,"date":"2022-10-06T14:45:27","date_gmt":"2022-10-06T12:45:27","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=454"},"modified":"2022-11-18T15:18:36","modified_gmt":"2022-11-18T13:18:36","slug":"10-4-json","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/10-4-json\/","title":{"rendered":"10.4. JSON"},"content":{"rendered":"<p>Otro formato en el que es com\u00fan que nos encontremos datos es JSON (<em>JavaScript object notation<\/em>), que no son m\u00e1s que objetos de JavaScript de los que podemos extraer sus propiedades de manera sencilla. En un JSON la informaci\u00f3n est\u00e1 algo m\u00e1s estructurada que en un .csv, por lo que nos ser\u00e1 un poco m\u00e1s sencillo de leer. Veamos los datos que hemos usado antes pero ahora en formato JSON:<\/p>\n<figure id=\"attachment_298\" aria-describedby=\"caption-attachment-298\" style=\"width: 450px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-298\" src=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_129.jpg\" alt=\"\" width=\"450\" height=\"468\" srcset=\"\/wp-content\/uploads\/2022\/10\/PID_00290094_129.jpg 600w, \/wp-content\/uploads\/2022\/10\/PID_00290094_129-288x300.jpg 288w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><figcaption id=\"caption-attachment-298\" class=\"wp-caption-text\">Figura 130. Estructura de un archivo JSON<br \/>Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n<p>Vemos que tenemos un <em>array <\/em>de objetos, cada uno con sus distintas propiedades, que se corresponden a las columnas de la tabla. Al tener ya todos los datos en un <em>array<\/em>, nos ser\u00e1 mucho m\u00e1s f\u00e1cil acceder a estos.<\/p>\n<pre>let lakesData;\r\nlet lakes = [];\r\n\r\nfunction preload() {\r\n  lakesData = loadJSON(\"lakes.json\");\t\r\n}\r\n\r\nfunction setup() {\r\n  createCanvas(400, 250);\r\n  let numOfLakes = Object.keys(lakesData).length;\r\n\t\r\n  for(let i = 0; i &lt; numOfLakes; i++) {\r\n    let newLake = new Lake(lakesData[i].name,\r\n                           lakesData[i].lat,\r\n                           lakesData[i].long, \r\n                           lakesData[i].area * 0.025);\r\n    lakes[i] = newLake;\r\n  }\r\n}<\/pre>\n<p>Pese a que en el JSON tenemos un <em>array<\/em> de objetos, al utilizar <span class=\"courier\">loadJSON()<\/span> se nos devolver\u00e1 un objeto del que no podemos obtener directamente su tama\u00f1o con <span class=\"courier\">lakesData.getRowCount()<\/span>, como hac\u00edamos en el caso del .csv. Esta es una limitaci\u00f3n que P5 todav\u00eda no ha podido solucionar, pero que podemos solventar obteniendo el n\u00famero de elementos en el objeto mediante <span class=\"courier\">Object.keys(lakesData).length<\/span>. La ventaja de disponer del objeto es que podemos acceder directamente a cada una de las propiedades y utilizarlas para crear nuestros objetos Lake sin tener que crear <em>arrays<\/em> independientes para cada una.<\/p>\n<p>Una vez creados los objetos <span class=\"courier\">Lake<\/span>, el resto de la visualizaci\u00f3n la har\u00edamos de la misma manera que anteriormente.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Otro formato en el que es com\u00fan que nos encontremos datos es JSON (JavaScript object notation), que no son m\u00e1s que objetos de JavaScript de los que podemos extraer sus propiedades de manera sencilla. En un JSON la informaci\u00f3n est\u00e1 algo m\u00e1s estructurada que en un .csv, por lo que nos ser\u00e1 un poco m\u00e1s [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/454"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=454"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/454\/revisions"}],"predecessor-version":[{"id":998,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/454\/revisions\/998"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}