CODEWITHSUNDEEP
jsonqtqmlqt5felgo
Ldweller
Ldweller

Reputation: 337

Using Nested JSON as section.property in listView QML

I am creating a listView where my delegate and it's information comes from JSON - My issue is I am trying to set the section.property from a nested area within the JSON. The nested data will be dynamic so I need to work in a way that adapts to each app user.

The documentation for what i'm working with is: JsonListModel & SortFilterProxyModel

An example of my JSON would be;

[{
"firstname":"Edward",
"subGroup":"Reception",
"admin":1,
"roles":
    {"Assistant":0,"Reception":1,"Stylist":1,"Technical":0
    }
},
{
"firstname":"Claire",
"subGroup":"Stylist",
"admin":1,
"roles":
    {"Assistant":1,"Reception":0,"Stylist":1,"Technical":0
    }
}]

I am working via using the JsonListModel, QT Creator a minimal section of my code is below:

import Felgo 3.0
import QtQuick 2.0

Page {
id: editAdmins


property var newArr: dataModel.calendarUserItems.users
property var userRoles: ({})
property var l

JsonListModel { // list model for json data
    id: jsonModel
    source: dataModel.jsonList // my full JSON
    keyField: "firstname " + " surname" 
    fields: ["firstname", "surname", "subGroup", "admin", "email", "roles"]
}

SortFilterProxyModel { // SortFilterProxyModel for sorting or filtering lists
    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: [
        RoleSorter {
            id: groupSorter
            roleName: "subGroup"
        },
    ]
}

AppListView {
    id:view
    model: sortedModel
    anchors.fill: parent

    section.property: "subGroup" //How I have used it previously before needing to set 'roles' as my property (which shows nothing)
    section.delegate: SimpleSection {}

delegate: SimpleRow {
    id: container

    text: model.firstname
    detailText: model.surname
    }
}
}

From the above JSON, the expected result would be that my listView has 4 Sections from within the roles nest. Assistant, Reception, Stylist, Technical

My question is: I would like to use the roles as my ListView {section.property}, and the visibility of users depends on their Boolean in that role - so from the above example; Edward would be visible in BOTH Reception and Stylist, whereas Claire would be visible in both Assistant and Stylist!

How can I define the nested JSON as my section property within my list?

------Update------

By adding an additional proxyRole within my SortFilterProxyModel { } as shown:

proxyRoles: ExpressionRole {
            name: "role"
            expression: JSON.stringify(model.roles)
       }

and changing my section.property: to "role" I am able to create sections for those with matching roles, closer, but still not as intended (see the attached screenshot for this)

I have further tried looping through the data, in many variations of:

        expression: {
            for(var x in model.roles){
                if(model.roles[x] === 1){
                    x
                }
            }
        }

and either returned the final index (As expected from above) or again, pushing the items to a new array but still returning them all as a result.

ListView with ExpressionRole

Upvotes: 3

Views: 814

Answers (1)

Ldweller
Ldweller

Reputation: 337

ListViews create each delegate derived from their model data, meaning delegates cannot be duplicated as effectively that's what I was trying to do depending on the Booleans in the user roles.

I rectified this, by when the array is created, any user with multiple Boolean values within thier roles gets an additional array object for each role, and directing my section.property to each individual role name.

From the below code Edward would have 2 array objects created, which then acts as a 'duplicate' delegate.

[{
"firstname":"Edward",
"subGroup":"Reception",
"admin":1,
"roles":
    {"Assistant":0,"Reception":1,"Stylist":1,"Technical":0
    }
},
{
"firstname":"Claire",
"subGroup":"Stylist",
"admin":1,
"roles":
    {"Assistant":1,"Reception":0,"Stylist":1,"Technical":0
    }
}]

Upvotes: 1

Related Questions