{"id":4365,"date":"2018-11-13T09:00:10","date_gmt":"2018-11-13T08:00:10","guid":{"rendered":"https:\/\/www.opengis.ch\/?p=4365"},"modified":"2020-05-27T18:33:51","modified_gmt":"2020-05-27T16:33:51","slug":"visualize-postgres-json-data-in-qml-widgets","status":"publish","type":"post","link":"https:\/\/www.opengis.ch\/de\/2018\/11\/13\/visualize-postgres-json-data-in-qml-widgets\/","title":{"rendered":"Visualize Postgres JSON data in QML widgets"},"content":{"rendered":"

As promised some time ago in „The new QML widgets in QGIS \u2013 When widgets get unbridled<\/a>“ we still owe you some fancy unicorns, but first let’s have a look at another nice feature that has been introduced in QGIS 3.4 LTR,  the reading of PostgreSQL JSON and JSONB types<\/a>.<\/strong><\/em>
\nWith JSON you have a lot of possibilities for storing unstructured data. In our case, it’s mainly interesting when the data are stored as an array or a JSON object. Let’s have a look at two examples.<\/p>\n

Visualize Postgres JSON data with common widgets<\/h1>\n

With the usual QGIS widgets „List“ and „Key\/Value“ you are able to display JSON arrays and simple JSON objects.<\/p>\n

JSON array as List<\/h2>\n
[\n    \"European dark bee\",\n    \"Carniolan honey bee\",\n    \"Buckfast bee\"\n]<\/pre>\n
\"\"<\/a><\/p>\n
Simple JSON object as Key\/Value<\/h2>\n
{\n    \"nomenclatura\":\"Apis mellifera mellifera\",\n    \"name\":\"European dark bee\",\n    \"link\":\"https:\/\/en.wikipedia.org\/wiki\/European_dark_bee\"\n}<\/pre>\n
\"\"<\/a><\/h3>\n
Or of course both as plain text in the „Text Edit“ widget:
\n\"\"<\/a><\/p>\n
Say hi to Postgres JSON in QML widget<\/h1>\n
Probably, your JSON data does not look really nice with the aforementioned widgets, luckily since QGIS 3.4, you are free to create your own QML widget. Since QGIS already loads the JSON data into structures that are supported by QML, we can use all the JSON data within the QML code.
\nLet’s assume you have the JSON array from above and you like the elegance of the blue of Jacques Majorelle. You create your personal list widget by adding the JSON field as an expression:<\/p>\n
import QtQuick 2.0\nRectangle {\n    width: 310; height: 250; color: \"grey\"\n    Column {\n        anchors.horizontalCenter: parent.horizontalCenter\n        anchors.verticalCenter: parent.verticalCenter\n        spacing: 5\n        Repeater {\n            model:expression.evaluate(\"\\\"jvalue\\\"\")\n            Rectangle {\n                color: \"#6050dc\"\n                width: 300; height: 50; radius: 10.0\n                Text {\n                    anchors.centerIn: parent\n                    font.pointSize: 24\n                    text: modelData\n                }\n            }\n        }\n    }\n}<\/pre>\n
You will have your very personal list:
\n\"\"<\/a>
\nJSON also allows storing more complex data, like for example a list of objects. In that case, you will reach the limits of the common QGIS widgets.
\nLet’s assume you have a table looking like this:<\/p>\n\n\n\n\n\n\n
nomenclatura<\/th>\nname<\/th>\nlink<\/th>\n<\/tr>\n
Apis mellifera mellifera<\/td>\nEuropean dark bee<\/td>\nhttps:\/\/en.wikipedia.org\/wiki\/European_dark_bee<\/td>\n<\/tr>\n
Apis mellifera carnica<\/td>\nCarniolan honey bee<\/td>\nhttps:\/\/en.wikipedia.org\/wiki\/Carniolan_honey_bee<\/td>\n<\/tr>\n
Apis mellifera<\/td>\nBuckfast bee<\/td>\nhttps:\/\/en.wikipedia.org\/wiki\/Buckfast_bee<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
In JSON it would be stored like this:<\/p>\n
[\n    {\"nomenclatura\":\"Apis mellifera mellifera\",\"name\":\"European dark bee\",\"link\":\"https:\/\/en.wikipedia.org\/wiki\/European_dark_bee\"},\n    {\"nomenclatura\":\"Apis mellifera carnica\",\"name\":\"Carniolan honey bee\",\"link\":\"https:\/\/en.wikipedia.org\/wiki\/Carniolan_honey_bee\"},\n    {\"nomenclatura\":\"Apis mellifera\",\"name\":\"Buckfast bee\",\"link\":\"https:\/\/en.wikipedia.org\/wiki\/Buckfast_bee\"}\n]<\/pre>\n
With the QML Widget you can use the QML TableView to visualize:<\/p>\n
import QtQuick 2.0\nimport QtQuick.Controls 1.4\nTableView {\n    width: 600\n    model: expression.evaluate(\"\\\"jvalue\\\"\")\n    TableViewColumn {\n        role: \"nomenclatura\"\n        title: \"Nomenclature\"\n        width: 200\n    }\n    TableViewColumn {\n        role: \"name\"\n        title: \"Name\"\n        width: 200\n    }\n    TableViewColumn {\n        role: \"link\"\n        title: \"Wikipedia\"\n        width: 200\n    }\n}<\/pre>\n
\"\"<\/a>
\nOr, even more powerful, you can create your super individual table using the model and create each row by using a QML Repeater<\/a>.
\nAdditionally, you can use a lot of fancy stuff like:<\/p>\n