ListView model: Javascript array?

devDawg

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!

ODБOï

@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]

devDawg

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

GrecKo

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.

devDawg

@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!

Forum Updated on Feb 6th

Unsolved ListView model: Javascript array?