Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Forum Updated on Feb 6th

    Unsolved ListView model: Javascript array?

    QML and Qt Quick
    3
    5
    5455
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • devDawg
      devDawg last edited by

      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!

      Anything worthwhile is never achieved easily.

      ODБOï 1 Reply Last reply Reply Quote 0
      • ODБOï
        ODБOï @devDawg last edited by

        @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]
        
        1 Reply Last reply Reply Quote 0
        • devDawg
          devDawg last edited by

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

          Anything worthwhile is never achieved easily.

          1 Reply Last reply Reply Quote 0
          • GrecKo
            GrecKo Qt Champions 2018 last edited by

            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 1 Reply Last reply Reply Quote 1
            • devDawg
              devDawg @GrecKo last edited by

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

              Anything worthwhile is never achieved easily.

              1 Reply Last reply Reply Quote 0
              • First post
                Last post