Using Nested JSON as section.property in listView QML

Question

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.

Please show your code. What you have managed to do so far, what you have failed to do. What is the expected behavior and what do you see instead. Now it looks like "do it for me" task. — folibis, Apr 02 '20 at 16:47
Hi @folibis I've updated with a minimal JsonListModel which I am using for clarity! It's a case of usually setting the `section.property: "..."` is normally fine but where it's the root of nested data I get nothing show up at all for my sections! — Ldweller, Apr 02 '20 at 17:11
Hi @folibis I've further expanded my question if this helps provide more insight on what I am trying to achieve! Thanks — Ldweller, Apr 05 '20 at 17:50

score 1 · Accepted Answer · answered Jun 12 '20 at 13:45

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

Using Nested JSON as section.property in listView QML

1 Answers1