Forums

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

Viewing 2 posts - 1 through 2 (of 2 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

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

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support