Using SimpleSection with ListView and SQLite db

[gabor53]

Hi,
I have a db with 2 fields: wordField and sectionField. I want to access the db and the db through a ListView. My QML file:

import Felgo 3.0
import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.LocalStorage 2.12
import "Database.js" as JS

App {

    AppListView {
        id: myListView
        anchors.fill: parent

        model: ListModel {
            id: listModel
        }

        delegate: SimpleRow {
            text: model.wordField
        }

        section.property: listModel.sectionField
        section.delegate: SimpleSection {
        }
    }

    Component.onCompleted: {
        JS.dbGetWordList()
    }
}

At this point it lists all the words from the db. There are no sections.

section.property: listModel.sectionField

gives the following error message: Unable to assign [undefined] to QString.
Clearly it is unable to access the sectionField in the db. I tried to change listModel to model but it doesn't work either. How can I define the section.property in this case correctly?
I appreciate any help. Thank you.

[GrecKo]

ListModel has no sectionField property. What is it supposed to be?

Also how do you pouplate your model? Are you somehow accessing listModel is JS.dbGetWordList()?

[gabor53]

Hi @GrecKo ,
I have JavaScript to access and add data to the db. sectionField is a field in the db. Here is the code:

function dbInit() {
    var db = LocalStorage.openDatabaseSync("ListViewTest", "",
                                           "Wordlist", 1000000)
    try {
        db.transaction(function (tx) {
            tx.executeSql('CREATE TABLE wordTable ( wordField TEXT)')
            console.log("Table created.")
        })
    } catch (err) {
        console.log("Error creating table in database: " + err)
    }
    ;
}

//Open database
function dbGetHandle() {
    dbInit()
    try {
        var db = LocalStorage.openDatabaseSync("ListViewTest", "",
                                               "Wordlist", 1000000)
    } catch (err) {
        console.log("Error opening database: " + err)
    }
    return db
}

//Read the wordField content from the db
function dbGetWordList() {

    var db = dbGetHandle()

    db.transaction(function (tx) {
        var results = tx.executeSql(
                    'SELECT  wordField, sectionField FROM wordTable ORDER BY sectionField ASC ')
        for (var i = 0; i < results.rows.length; i++) {

            listModel.append({
                             "sectionField": results.rows.item(i).sectionField,
                             "wordField": results.rows.item(i).wordField,
                             "checked": ""
                         })
        }
    })
}

function modelSort() {
    var model = []
    for (var i = 0; i < 26; i++) {
        var entry = {
            "text": String.fromCharCode(65 + i)
        }
        model.push(entry)
    }
    return model
}

Basically what I want to do is using the sectionField db field as the section property for listView.
Please advise how to do this correctly. Thank you.

[GrecKo]

section.property take the name of a role of the model.

if sectionField is a role name of your model, do section.property: "sectionField"

[gabor53]

@GrecKo Can I use the field name from the model table as a role name? Or how can I turn the field name (sectionField) into a role?