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..



  • 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
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.