[Edward]

Hey!

I am currently working with a standard ListVew to display my data, but I want to convert this to the JsonListModel – to add filter options and also change the default display order – I have been reading through the documentation, but am struggling to get this to work when using nested JSON data;

For example, each user in my firebase database has a ‘user’ section, (and example for this is below)

 

Edward L {
  "admin" : 1,
  "allowances" : {
    "2028" : {
      "taken" : 0,
      "total" : 13216,
    }
  },
  "details" : {
    "email" : "edward@email.com",
    "firstname" : "Edward",
    "group" : "T&G Canary Wharf",
    "subGroup" : "Reception",
    "surname" : "L"
  },
  "groupStatus" : 1
},
User 2 {…},
User 3 {…}

 

Previously – I set my ListView’s model to ‘Object.keys()’ then used a readonly property to access nested data, but am struggling in translating this across,

For my use-case, I would be accessing the above JSON, but only needing to use the ‘details’ branch of the data for my filters or section header – I.e sort by firstname/surname/subgroup;

 

How would I go about working multiple nested json objects to create my listView!?

 

Thanks for any help!

Edd

[AlexFelgo Team]

Hi Edward,

I prepared a quick and dirty example based on one example in our docs, to sort by a nested Object property:

import Felgo 3.0
import QtQuick 2.0

App {
  Page {
    id: page

    // property with json data
    property var jsonData: {
      "1" : {
        "id": 1,
        "title": "Apple",
        "type": "Fruit",
        "details" : {
            "email" : "edward@email.com",
            "firstname" : "Edward",
            "group" : "T&G Canary Wharf",
            "subGroup" : "Reception",
            "surname" : "L"
          },
      },
      "2" : {
        "id": 2,
        "title": "Ham",
        "type": "Meat",
        "details" : {
            "email" : "edward@email.com",
            "firstname" : "Ddward",
            "group" : "T&G Canary Wharf",
            "subGroup" : "Reception",
            "surname" : "L"
          },
      },
      "3" : {
        "id": 3,
        "title": "Bacon",
        "type": "Meat",
        "details" : {
            "email" : "edward@email.com",
            "firstname" : "Xdward",
            "group" : "T&G Canary Wharf",
            "subGroup" : "Reception",
            "surname" : "L"
          },
      },
      "4" : {
        "id": 4,
        "title": "Banana",
        "type": "Fruit",
        "details" : {
          "email" : "edward@email.com",
          "firstname" : "Udward",
          "group" : "T&G Canary Wharf",
          "subGroup" : "Reception",
          "surname" : "L"
        },
      }
    }

    // Cast to array for use with jsonListModel
    property var jsonArray: Object.values(jsonData)

    // list model for json data
    JsonListModel {
      id: jsonModel
      source: page.jsonArray
      keyField: "id"
      fields: ["id", "title", "type", "details"]
    }

    // SortFilterProxyModel for sorting or filtering lists
    SortFilterProxyModel {
      id: sortedModel
      // Note: when using JsonListModel, the sorters or filter might not be applied correctly when directly assigning sourceModel
      // use the Component.onCompleted handler instead to initialize SortFilterProxyModel
      Component.onCompleted: sourceModel = jsonModel
      sorters: ExpressionSorter {
        expression: {
          return modelLeft.details.firstname < modelRight.details.firstname;
        }
      }
    }

    // list view
    AppListView {
      anchors.fill: parent
      model: sortedModel
      delegate: SimpleRow {
        text: model.title
      }
    }
  } // Page
}

 

The model is sorted by the firstname (which uses very creative different first characters, please forgive me for messing with your name).

I hope that gives you an idea for your use-case.

Cheers,
Alex

[Edward]

Thanks that works perfectly for what I need, my final question with this though;

 

I want to create a section.property, and from the above example it would be details.subGroup, I have tried a few different things but none have worked?

Just using a basic,

    section.property: "subGroup"
    section.delegate: SimpleSection { }

but I can’t seem to get it working what could  use to sort this?

Using your advice above I have sorted alphabetically by:

        sorters: ExpressionSorter {
            id: typeSorter
            expression: {
                return modelLeft.details.firstname < modelRight.details.firstname;
            }
            ascendingOrder: true
        }

but how can I adapt for section.properties?

 

Thanks

Edd

[Edward]

Hey!

I am still having issues with creating a section.property & section.delegate, from the above example accessing details.subGroup,

How could I apply the roleSorter to do this?

Thanks

[Edward]

and as per, ive (kind of) figures it out, using the proxyRole:ExpressionRole{}, but I cannot seem to sort both by section.property and alphabetically – it appears to be one or the other (In other areas within my app where I am not with nested JSON I can do both as the same time;

So how using the ExpressionRole AND ExpressionSorter could I work in tandem?

current code is:

 

    SortFilterProxyModel {
        id: sortedModel
        Component.onCompleted: sourceModel = jsonModel
        proxyRoles: ExpressionRole {
            name: "subGroup"
            expression: model.details.subGroup
        }
        sorters:[
            ExpressionSorter {
                id: typeSorter
                expression: {
                    return modelLeft.details.firstname < modelRight.details.firstname;
                }
                ascendingOrder: true
            }
        ]
    }

 

[Edward]

and it was as simple as adding another expression sorter:

 

    SortFilterProxyModel {
        id: sortedModel
        Component.onCompleted: sourceModel = jsonModel
        proxyRoles: ExpressionRole {
            name: "subGroup"
            expression: model.details.subGroup
        }
        sorters:[
            ExpressionSorter {
                id: typeSorter
                expression: {
                    return modelLeft.details.subGroup < modelRight.details.subGroup;
                }
                ascendingOrder: true
            },
            ExpressionSorter {
                id: nameSorter
                expression: {
                     return modelLeft.details.firstname < modelRight.details.firstname;
                }
                ascendingOrder: true
            }
        ]
    }