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!

[LeLev]

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