Populate Listview from Database

[Qjay]

I want to populate listview ( a specific page in my app ) from a database .

Currently the page is static and look like this

image: https://s32.postimg.org/vrsdrl2p1/man.png

code

import QtQuick 2.6
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0


Pane {
    padding: 0

    property var delegateComponentMap: {
        "page": itemDelegateComponent

    }

    Component {
        id: itemDelegateComponent

        ItemDelegate {
            text: labelText
            width: parent.width
        }
    }






    ColumnLayout {
        id: column
        spacing: 40
        anchors.fill: parent
        anchors.topMargin: 20

        Label {
            id: label1
            Layout.fillWidth: true
            wrapMode: Label.Wrap
            horizontalAlignment: Qt.AlignHCenter
            text: "Offline Pages "
        }

        ListView {
            id: listView

            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            model: ListModel {
                ListElement { type: "ItemDelegate"; labelText: "page1" }
                ListElement { type: "ItemDelegate"; labelText: "page2" }
                ListElement { type: "ItemDelegate"; labelText: "page3" }


            }
            spacing: 5

            section.property: "type"

            delegate: Component{

                Item{
                    id: aItem
                    width: listView.width //rowLayout.width. We got width from children elements before, now get width from listView
                    height: 30

                    RowLayout{

                        id: rowLayout
                        anchors.fill: parent
                        spacing: 10

                        Label{
                            id:page_name
                            padding: 10
                            text: labelText
                            Layout.fillWidth: true // !!! to fill most part of row width

                        }


                            Button{

                                text: qsTr("Delete")

                                id: delete_button

                            }
                            Button{

                                text: qsTr("Update")
                                id: update_button
                            }



                    }
                }
            }
        }









        RowLayout{
            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom

            Button{
                text:"Update All"


            }
            Button{
                text:"Delete All"
            }
        }
    }
}

my databse only has 2 entries ( looks like this )

db : https://s32.postimg.org/jb4nhmoxh/image.png

how should i approach this task ?

[_antipattern_]

I think you might be looking for QSqlTableModel, I'm not sure though how to use it with a ListView.

[veryqtperson]

Well, you need to connect to DB and execute SQL query in C++ code and pass the data to QML where you can display it. It's not like you can query DB right from QML.
This might help you.

[Qjay]

thanks @veryqtperson . I will try to implement it