Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

ListView model: Javascript array?



  • Hi all,

    Simple and short question for today: Can I use a Javascript array as the model for a ListView?

    I have been trying to do this, and it doesn't appear to be possible. If someone does think it's possible, I will post my example code so you can take a look at how I'm trying to do it.

    Thanks!



  • @devDawg hi,

    import "jsFile.js" as JsFile
    Window {
        width: 400
        height: 400
        visible: true
        ListView{
            height: parent.height
            width: parent.width/2
            model: JsFile.jsarr
            delegate:Text{
                text:JsFile.jsarr[index]
                height: 20
                width: 50
            }
        }
    }
    

    / /jsFile.js

    var jsarr = [1,2,"egg",3,3.14]
    


  • @LeLev Interesting. In my case, I don't have a .js file; I simply have a bunch of ListElements within a ListModel, where each ListElement has a "data" property that I've declared as an array using "[]". Each item in the data array is also a ListElement containing quite a bunch of properties, such as "name", "source", "type", etc. Here is some of my code to show you what I am talking about:

    ListView {
                    id: customGridList
                    width: 350
                    height: 480
                    anchors.top: parent.top
                    anchors.left: parent.left
                    spacing: 5
    
                    model: StreamModel { id: ref }
    
                    delegate: Component {
                        CustomGrid {
                            id: grid
                            width: 350
                            height: 480
                            
                            reference: ref.get(index)
                            
                        }
                    }
    

    StreamModel.qml:

    ListModel {
    
    id: streamQMLmodel
    
        ListElement {
    
            name: "Operator HMI"
            type: "module"
            data_size: 16
            p1_size: 3
            comm_size: 0
    
            data: [ ListElement { sourceID: -1; source: "-"; isAnalog: true; name: "Key"; type: "enum"; value: "0"; units: "-"; priority: "1";
             minimum: "0"; maximum: "2"; warnMaximumLevel: "-"; warnMinimumLevel: "-"; critMaximumLevel: "-"; critMinimumLevel: "-"; moduleName: "Operator HMI"; },
    
             ListElement { sourceID: -1; source: "-"; isAnalog: true; name: "Mode"; type: "enum"; value: "0"; units: "-"; minimum: "0";
             maximum: "3"; priority: "2"; warnMaximumLevel: "-"; warnMinimumLevel: "-"; critMaximumLevel: "-"; critMinimumLevel: "-"; moduleName: "Operator HMI"; },
    
             ListElement{ sourceID: -1; source: "-"; isAnalog: true; name: "Transmission Shift"; type: "enum"; value: "0"; units: "-"; minimum: "0";
             maximum: "3";priority: "1"; warnMaximumLevel: "-"; warnMinimumLevel: "-"; critMaximumLevel: "-"; critMinimumLevel: "-"; moduleName: "Operator HMI"; }, ...
    
    and on and on.
    
    

    CustomGrid.qml is where I try to pass my array as a model:

    ListView {
        id: root
        property var reference //Pass in the indexed ListElement. we then use the Repeater on it's data property.
    
        model: reference.data
    
        delegate: Component {
            GridRowDelegate {
                height: 18
    
                cell1str: model.get(index).name
                cell2str: reference.data[index].name
                cell3str: "jimmy"
            }
        }
    

    for the assignment of cell1str, I get Property 'get' of object QQmlDMAbstractItemModelData(0x108cf00) is not a function.

    for the assignment of cell2str, I get TypeError: Cannot read property 'name' of undefined.

    So the data object is coming in as undefined, even though it's a property of reference..


  • Qt Champions 2018

    ListView and other views are totally compatible with js arrays.

    You don't even have to access the array by indexing it, the view does that for you.

    However, I guess you should not put ListElement in your array, just js objects.so data: [ ListElement { sourceID: -1; ... should be data: [ { sourceID: -1; ...

    How are you passing the indexed ListElement in your reference property ?

    Anyway, you should access it in your GridViewDelegate like so: cell1str: modelData.name.
    modelData is how you can access data from a dumb model with no roles.



  • @GrecKo Hi! Thanks for the reply. I got this to work, but not using traditional JS array functions.

    For example, let's say the ListElement I am interested in contains a property called "outputs", which is an array []. If this ListElement was contained inside of a model, I would access elements of outputs like this:

    model.get(index).outputs.get(output_index);
    

    This works great! Now on to the next task..

    Thanks for the feedback, guys!


Log in to reply