In this article, I will address the problem of preparing a tree model for any data containing mixed types and show you how to solve it.<\/p>\n\n\n\n
The generic problem is to prepare a tree model for any data containing mixed types. To make the example more appealing let\u2019s assume we want to read JSON data from the backend and display it on the GUI. Moreover, it would be nice to have the possibility to collapse all lists and objects. JSON could be constructed in any way so the app should be flexible. Properties could have different names which are unknown.<\/p>\n\n\n\n
If there would be no preconditions an option would be to use QTreeView<\/strong> class, but there are projects that do not use widgets. For GUI we would go with QML, and for the model, there are still some options. If we are open for an MIT-licensed code there is something like JSONListModel<\/strong> (QML) or QJsonModel<\/strong> (cpp). But what if we are using only pure qt libs? It\u2019s not a simple list model so initial thoughts could lead to the cpp model, like using an abstract interface of QAbstractItemModel<\/strong>. It will go well with TreeView<\/strong> but after Qt 6.3 or before 6.0, since there is a gap in implementation.<\/p>\n\n\n\n But this model sounds like a solid cannon that will grow together with a couple of classes down on the backend side. Moreover, TreeView<\/strong> is not available in our case (Qt 6.2). Maybe the model is not that complicated and could be handled on the QML side. Let\u2019s try this approach.<\/p>\n\n\n\n Let\u2019s create CustomDataModel.qml<\/strong> which will represent our model. It will be based on ListModel<\/strong>. JSON file will be loaded into the front end as a QString<\/strong>. From there it will be parsed to the JavaScript value or object described by the string and then passed to the parseObject<\/strong> function inside CustomDataModel<\/strong>.<\/p>\n\n\n\n It could be an array; it could be a simple key value or it could be also an object with many properties. We need to identify what is it for each key. Inside a for loop there is a call to extractValue<\/strong> where check: Array.isArray<\/strong> that will do just fine. The action name is self-explanatory. If it\u2019s not the case, the second task is to distinguish if the value is an object. It is done with the usage of the constructor<\/strong> property. If we have an object, we would need to read all properties of it and add those to the model.<\/p>\n\n\n\n Here a recursive approach is taken by creating the object of a parent class and calling parseObject<\/strong> again. If all nested parameters are loaded, we can go further. Append<\/strong> in ListModel<\/strong> needs jsobject<\/strong> in the parameter, and in our example, we need to pass a key in there. To achieve that we are using syntax: append({[key]: value})<\/strong>. If the item is just a value the simple append<\/strong> to the ListModel would be enough.<\/p>\n\n\n\n Now let\u2019s get back to the array case and investigate the parseArray<\/strong> function. Elements here are added in a loop. The length<\/strong> parameter is used to determine how many elements are there and before appending to the ListModel<\/strong>, an array is created where all items are pushed. Each element of an array could be an object, or value, or\u2026 an array so here we go again with the recursive approach. It is done with the help of the function extractValue<\/strong> . And that\u2019s it. The whole model class has less than 35 lines of code. I would say it is pretty concise.<\/p>\n\n\n\n Now to the view, let\u2019s create CustomDataView.qml<\/strong><\/p>\n\n\n It is based on the ListView<\/strong> component and has a simple Column<\/strong> delegate which will be dynamically created in Component.onCompleted<\/strong>, where simply the createView<\/strong> function is called.<\/p>\n\n\n\n This function goes through all properties of an item and checks what it is. It will decode once created model items are. So, starting from the bottom we have created plain Text: key: value<\/strong> with some indentation done by the Item<\/strong>. Going up there is again check if the constructor property points to the object. In this case, the prepareNestedElements<\/strong> function is called. It\u2019s because an object can have multiple properties so it needs to be nested.<\/p>\n\n\n\n Moving inside this function, another one is called: createObjectElement<\/strong>. It will create a QML object by calling Qt.createQmlObject<\/strong> and putting it inside rootId<\/strong> which is the param here. The object will be created based on GridLayout<\/strong>, and inside there will be a button to collapse nested items. The alias to the childsId<\/strong> is so the access is provided to outside. In that way, we add new elements inside, directly to childsId<\/strong>.<\/p>\n\n\n\n Going back to prepareNestedElements<\/strong>, after creating the object we need to fill it in. So recursive call to create a view will take care of all that\u2019s inside: arrays, objects, and simple elements. Mentioned child.childsId<\/strong> is passed as a param, so it will be created inside that ColumnLayout<\/strong> which is collapsible by the button. One important thing worth mentioning here is the third param in createView.<\/strong><\/p>\n\n\n\n If it\u2019s not an array but an object, we are passing the index here. It will extract the correct parameter from the model because each item has a different key and on the other hand, all items in CustomListModel<\/strong> has all parameter names present. In simple words, if we add item[\u201ca\u201d]<\/strong> and item[\u201cb\u201d]<\/strong> to a ListModel<\/strong>, each item will have both params, one with the value and the other empty. So, from each one, we would like to extract only valid values.<\/p>\n\n\n\n The one case that is left is an array. To identify this, we can check if the value is ListModel<\/strong> and not a CustomListModel<\/strong>. Reason for that we can find in a documentation of a ListModel<\/strong> in a get<\/strong> function: \u201cproperties of the returned object that are themselves objects will also be models\u201d. If we check the type, it is QQmlListModel<\/strong>. And since we do not explicitly make it CustomListModel<\/strong> we have a solution how to distinguish that we in fact have an array.<\/p>\n\n\n\n A similar problem occurred in real life project I had. The thing worth mentioning is that from Qt6.3 we have a TreeView<\/strong> that could ease some things out. All of this is like 100 lines of code in QML. Sounds good to me. Presented code example could be extended using dynamicRoles<\/strong> property from ListModel <\/strong>to also support property names with different types, however according to documentation it could hit performance so it\u2019s 4-6 times slower.<\/p>\n\n\n\n If this would not be JSON but some other tree like data structure it would be clearer that this model has to be custom, and with that in mind, I hope this article could show you the possible approach in such a situation. The same goes for the QML view, which is more popular nowadays and embedded-friendly. The whole example would be attached somewhere, so go ahead and check it out.<\/p>\n\n\n\n ***<\/p>\n\n\n\n If you are interested in the topic of QML, read also the author’s other article<\/a>.<\/p>\n\n\nSolution<\/strong><\/h2>\n\n\n
\nimport QtQuick\n\nListModel {\n id: root\n\n function createAndLoadComponent(item) {\n var newObj = Qt.createComponent("CustomDataModel.qml").createObject(root)\n newObj.parseObject(item)\n return newObj\n }\n\n function extractValue(value) {\n if (Array.isArray(value))\n return parseArray(value)\n else if (value.constructor === ({}).constructor)\n return createAndLoadComponent(value)\n else\n return value\n }\n\n function parseArray(value) {\n var arr = []\n for (var i = 0; i < value.length; i++)\n arr.push({[""]: extractValue(value[i])})\n return arr\n }\n\n function parseObject(json) {\n for (var key in json)\n root.append({[key]: extractValue(json[key])})\n }\n}\n<\/pre><\/div>\n\n\nFirst step \u2013 CustomDataModel.qml creating<\/strong><\/h3>\n\n\n\n
The parseArray function<\/strong><\/h3>\n\n\n\n
CustomDataView.qml creating<\/strong><\/h3>\n\n\n\n
\nimport QtQuick\nimport QtQuick.Controls\n\nListView {\n id: root\n property var customModel\n function createObjectElement(prop, rootId) {\n return Qt.createQmlObject(`\n import QtQuick\n import QtQuick.Controls\n import QtQuick.Layouts\n GridLayout {\n property alias childsId: childsId\n columns: 2\n Button { text: childsId.visible ? "-" : "+"\n onClicked: childsId.visible = !childsId.visible }\n Text { text: "${prop}:" }\n Item {}\n ColumnLayout { id: childsId }}`, rootId)\n }\n\n function prepareNestedElements(prop, rootId, value, ifArray) {\n var child = createObjectElement(prop, rootId)\n for (var i = 0; i < value.count; i++)\n createView(value.get(i), child.childsId, ifArray ? null : i)\n }\n\n function createView(item, rootId, index) {\n let count = 0;\n for (var prop in item)\n if ((index !== undefined && index !== null && index !== count++) || !item[prop]) {\n } else if (item[prop] instanceof ListModel && !(item[prop] instanceof CustomDataModel)) {\n prepareNestedElements(prop, rootId, item[prop], true)\n } else if (item[prop].constructor === ({}).constructor) {\n prepareNestedElements(prop, rootId, item[prop], false)\n } else {\n var middle = prop === "" ? "" : ": "\n Qt.createQmlObject(`\n import QtQuick\n Row {\n Item { width: 20; height: 10 }\n Text { text: "${prop}${middle}${item[prop]}" }}`, rootId\n )\n }\n }\n model: customModel\n delegate: Column {\n id: colId\n Component.onCompleted: root.createView(customModel.get(index), colId)\n }\n}\n<\/pre><\/div>\n\n\nCreateObjectElement function<\/strong><\/h3>\n\n\n\n
An array cases<\/strong><\/h3>\n\n\n\n
Summary<\/strong><\/h2>\n\n\n\n
Application files<\/strong><\/h2>\n\n\n\n
Sources<\/strong><\/h2>\n\n\n\n
\n