Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

OverviewFelgo 2 Support (Qt 5) › JsonListModel with nested data

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22135

    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

    #22144

    Alex
    Felgo 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

    #22191

    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

    #22421

    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

    #22423

    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
                }
            ]
        }

     

    #22424

    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
                }
            ]
        }

     

Viewing 6 posts - 1 through 6 (of 6 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded