{"id":668,"date":"2011-03-19T00:47:57","date_gmt":"2011-03-19T03:47:57","guid":{"rendered":"http:\/\/realnorth.net\/blog\/?p=668"},"modified":"2011-12-16T22:54:13","modified_gmt":"2011-12-17T01:54:13","slug":"json-qml","status":"publish","type":"post","link":"https:\/\/realnorth.net\/blog\/json-qml\/","title":{"rendered":"Consumiendo JSON con QML"},"content":{"rendered":"<p>Hace un tiempo escrib\u00ed sobre lo f\u00e1cil que es <a href=\"http:\/\/realnorth.net\/blog\/consumiendo-xml-con-qml\/\">consumir XML con QML<\/a>, hoy le toca el turno a JSON, consumir JSON con QML requiere un poco mas de trabajo comparado con XML, pero no mucho mas.<\/p>\n<p>Pasemos al c\u00f3digo, lo primero que haremos sera crear un archivo data.js que contendr\u00e1 la l\u00f3gica que poblara al Model con los datos, para este ejemplo vamos a usar el API de Wikileaks para mostrar un listado con los \u00faltimos cables liberados, lo siguiente es agregar el ListModel, el Delegate cuyo c\u00f3digo esta al final y no necesita muchos comentarios, el ListView que mostrara los datos y vamos a disparar la funci\u00f3n getLatestCables() cuando la view se haya cargado.<\/p>\n<h5>main.qml<\/h5>\n<pre>\r\nimport QtQuick 1.0\r\nimport &quot;data.js&quot; as Data\r\n\r\nRectangle {\r\n    width:360\r\n    height:640\r\n\r\n    Component.onCompleted:Data.getLatestCables();\r\n\r\n    ListModel {\r\n        id:cablesModel\r\n    }\r\n\r\n    CablesDelegate {\r\n        id:cablesDelegate\r\n    }\r\n\r\n    Item {\r\n        id:cablesList\r\n        anchors.fill:parent\r\n\r\n        ListView {\r\n            model:cablesModel\r\n            delegate:cablesDelegate\r\n            anchors.fill:parent\r\n        }\r\n    }\r\n}\r\n<\/pre>\n<p>La magia que no es mucha, pasa aqu\u00ed, esto es simple y puro JavaScript, utilizaremos un XMLHttpRequest para acceder al feed con los datos, luego lo parseamos e iremos agregando uno a uno los datos al Model.<\/p>\n<h5>data.js<\/h5>\n<pre>\r\nfunction getLatestCables(){\r\n    var xhr = new XMLHttpRequest;\r\n    xhr.open(&quot;GET&quot;, &quot;http:\/\/api.leakfeed.com\/v1\/cables\/latest.json&quot;);\r\n    xhr.onreadystatechange = function() {\r\n        if (xhr.readyState == XMLHttpRequest.DONE) {\r\n            var a = JSON.parse(xhr.responseText);\r\n            for (var c in a) {\r\n                var i = a[c];\r\n                cablesModel.append({identifier: i.identifier, classification: i.classification, office: i.office, subject: i.subject});\r\n            }\r\n        }\r\n    }\r\n    xhr.send();\r\n}\r\n<\/pre>\n<h5>CablesDelegate.qml<\/h5>\n<pre>\r\nimport QtQuick 1.0\r\n\r\nComponent {\r\n\r\n    Rectangle {\r\n        border.color:&quot;#b7b7b7&quot;\r\n        border.width:1\r\n        width:parent.width\r\n        height:cableIdentifier.height + cableOffice.height + cableClass.height + cableSubject.height + 10\r\n        color:&quot;#fff&quot;\r\n\r\n        Item {\r\n            width:parent.width\r\n            height:parent.height\r\n\r\n            Grid {\r\n                rows:4\r\n                width:parent.width\r\n                anchors.verticalCenter:parent.verticalCenter\r\n                anchors.left:parent.left\r\n                anchors.leftMargin:5\r\n                anchors.right:parent.right\r\n                anchors.rightMargin:5\r\n\r\n                Text {\r\n                    id:cableIdentifier\r\n                    text:identifier\r\n                    font.bold:true\r\n                    font.pixelSize:18\r\n                    smooth:true\r\n                    color:&quot;#333&quot;\r\n                }\r\n\r\n                Text {\r\n                    id:cableOffice\r\n                    color:&quot;#0076A3&quot;\r\n                    text:office\r\n                    font.pixelSize:18\r\n                    font.bold:true\r\n                    smooth:true\r\n                }\r\n\r\n                Text {\r\n                    id:cableClass\r\n                    color:&quot;#aa1317&quot;\r\n                    text:classification\r\n                    font.pixelSize:16\r\n                    font.bold:true\r\n                    smooth:true\r\n                }\r\n\r\n                Text {\r\n                    id:cableSubject\r\n                    text:subject\r\n                    font.pixelSize: 14\r\n                    wrapMode:Text.WrapAtWordBoundaryOrAnywhere\r\n                    width:parent.width\r\n                    smooth:true\r\n                    color:&quot;#333&quot;\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n<\/pre>\n<p>Si todo sale bien, al correr la demo deber\u00edamos obtener como resultado algo parecido a los que se ve en la siguiente imagen.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/realnorth.net\/blog\/wp-content\/uploads\/2011\/03\/home-paulo-projects-Qt-JSONSample-main.qml-Qt-QML-Viewer_002.png\" alt=\"JSON &amp; QML\" title=\"JSON &amp; QML\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hace un tiempo escrib\u00ed sobre lo f\u00e1cil que es consumir XML con QML, hoy le toca el turno a JSON, consumir JSON con QML requiere un poco mas de trabajo comparado con XML, pero no mucho mas. Pasemos al c\u00f3digo, lo primero que haremos sera crear un archivo data.js que contendr\u00e1 la l\u00f3gica que poblara [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[23,43,44,46],"class_list":["post-668","post","type-post","status-publish","format-standard","hentry","category-development","tag-json","tag-qml","tag-qt","tag-qt-quick"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/comments?post=668"}],"version-history":[{"count":3,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/668\/revisions"}],"predecessor-version":[{"id":1253,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/posts\/668\/revisions\/1253"}],"wp:attachment":[{"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/media?parent=668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/categories?post=668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/realnorth.net\/blog\/wp-json\/wp\/v2\/tags?post=668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}