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?