Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Populate Combobox from firebase callback

Populate Combobox from firebase callback

Scheduled Pinned Locked Moved Solved QML and Qt Quick
12 Posts 2 Posters 2.5k Views
  • 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.
  • L Offline
    L Offline
    Ldweller
    wrote on 19 Aug 2018, 11:23 last edited by
    #1

    Hey!
    On my user registration form there is a dropdown box, which i want the selected title to assign each user to a subgroup in firebase,
    I am struggling to display the titles in the dropdown box,

    I have tried;

    db.getValue("public/listEntries", {
                       startAt: {
                         key: "startKey",
                         value: "startValue"
                       }
                     }, function(success, key, value) {
                       if(success) {
                         console.log("Read user value for key", key, "from DB:", value)
                         combobox.model = value
                       }
                     })
    

    and also another way of

    function loadData() {
         loading = true
         console.debug("loading data")
         firebaseDb.getValue("public/listEntries", {
                             }, function(success, key, value) {
                               if(success) {
                                 combobox.model = value
                               }
                               loading = false
                             })
       }
    
    
    

    would this be the correct way of doing this, if so what am i doing wrong? or would there be a different method, bearing in mind want the selection to assign the uid to a set group within my database!

    Any help is amazing!

    Thanks

    D 1 Reply Last reply 23 Aug 2018, 03:32
    0
    • L Ldweller
      19 Aug 2018, 11:23

      Hey!
      On my user registration form there is a dropdown box, which i want the selected title to assign each user to a subgroup in firebase,
      I am struggling to display the titles in the dropdown box,

      I have tried;

      db.getValue("public/listEntries", {
                         startAt: {
                           key: "startKey",
                           value: "startValue"
                         }
                       }, function(success, key, value) {
                         if(success) {
                           console.log("Read user value for key", key, "from DB:", value)
                           combobox.model = value
                         }
                       })
      

      and also another way of

      function loadData() {
           loading = true
           console.debug("loading data")
           firebaseDb.getValue("public/listEntries", {
                               }, function(success, key, value) {
                                 if(success) {
                                   combobox.model = value
                                 }
                                 loading = false
                               })
         }
      
      
      

      would this be the correct way of doing this, if so what am i doing wrong? or would there be a different method, bearing in mind want the selection to assign the uid to a set group within my database!

      Any help is amazing!

      Thanks

      D Offline
      D Offline
      Diracsbracket
      wrote on 23 Aug 2018, 03:32 last edited by Diracsbracket
      #2

      @Ldweller said in Populate Combobox from firebase callback:
      This line must be the problem:

      combobox.model = value

      The model property of the ComboBox type requires a model
      http://doc-snapshots.qt.io/qt5-5.11/qtquick-modelviewsdata-modelview.html
      or an array of strings.

      If your 'value' is just a single string, then you must write something like

      combobox.model = [value]
      

      For multiple values, push new values into an array, e.g.

          property var myArray: []
      
          Column {
              Button {
                  text: "press me"
                  onClicked: {
                      myArray.push("Banana")
                      combo.model = myArray
                  }
              }
      
              ComboBox {
                  id: combo
                  width: 200
                  model: myArray//[ "Banana", "Apple", "Coconut" ]
              }
          }
      
      1 Reply Last reply
      0
      • L Offline
        L Offline
        Ldweller
        wrote on 25 Aug 2018, 11:27 last edited by
        #3

        @Diracsbracket Thanks so much for the response, I will work on adapting this tonight as I need it to automatically load into my registration form using the "onFirebaseReady{}", will post results if anyone else needs help with this!

        Thanks

        1 Reply Last reply
        0
        • L Offline
          L Offline
          Ldweller
          wrote on 27 Aug 2018, 20:36 last edited by
          #4

          Hey @Diracsbracket I have had success!!, to apply this whilst reading from the Firebase Database I adjusted your suggestion above to the code below;

          But, my only concern is that this reads/displays my titles which I have added to the code, but in the future, when I wish to add more items, I would need to push an update to the app.(Taking time) Is there any way I can call an array, using one instance to populate the dropdown, so if I log into my Firebase console and add a new title to the "listEntries" area is would automatically appear in my application?

          property var myArray: []
          
                  onFirebaseReady: {
                      firebaseDb.getValue("public/listEntries/Title1",
                                          {}, function(success, key, value) {
                                              if(success) {
                                                  myArray.push(value); combobox.model = myArray
                                              }
                                          })
                      firebaseDb.getValue("public/listEntries/Title2",
                                          {}, function(success, key, value) {
                                              if(success) {
                                                  myArray.push(value); combobox.model = myArray
                                              }
                                          })
                      firebaseDb.getValue("public/listEntries/Title3",
                                          {}, function(success, key, value) {
                                              if(success) {
                                                  myArray.push(value); combobox.model = myArray
                                              }
                                          })
                  }
          
          Quick2.ComboBox {
                              id: combobox
                              visible: registerCheckbox.checked ? true : false
                              Layout.preferredWidth: dp(200)
                              padding: dp(12)
          
                              model: myArray [""]
          
                              delegate: Quick2.ItemDelegate {
                              width: combobox.width
                              height: combobox.height
                              padding: dp(12)
                              contentItem: AppText {
                                  text: modelData
                              }
                              highlighted: combobox.highlightedIndex == index
                          }
                              contentItem: AppText {
                                  width: combobox.width - combobox.indicator.width - combobox2.spacing
                                  text: combobox.displayText
                                  wrapMode: Text.NoWrap
                              }
                          }
          
          D 1 Reply Last reply 28 Aug 2018, 02:31
          0
          • L Ldweller
            27 Aug 2018, 20:36

            Hey @Diracsbracket I have had success!!, to apply this whilst reading from the Firebase Database I adjusted your suggestion above to the code below;

            But, my only concern is that this reads/displays my titles which I have added to the code, but in the future, when I wish to add more items, I would need to push an update to the app.(Taking time) Is there any way I can call an array, using one instance to populate the dropdown, so if I log into my Firebase console and add a new title to the "listEntries" area is would automatically appear in my application?

            property var myArray: []
            
                    onFirebaseReady: {
                        firebaseDb.getValue("public/listEntries/Title1",
                                            {}, function(success, key, value) {
                                                if(success) {
                                                    myArray.push(value); combobox.model = myArray
                                                }
                                            })
                        firebaseDb.getValue("public/listEntries/Title2",
                                            {}, function(success, key, value) {
                                                if(success) {
                                                    myArray.push(value); combobox.model = myArray
                                                }
                                            })
                        firebaseDb.getValue("public/listEntries/Title3",
                                            {}, function(success, key, value) {
                                                if(success) {
                                                    myArray.push(value); combobox.model = myArray
                                                }
                                            })
                    }
            
            Quick2.ComboBox {
                                id: combobox
                                visible: registerCheckbox.checked ? true : false
                                Layout.preferredWidth: dp(200)
                                padding: dp(12)
            
                                model: myArray [""]
            
                                delegate: Quick2.ItemDelegate {
                                width: combobox.width
                                height: combobox.height
                                padding: dp(12)
                                contentItem: AppText {
                                    text: modelData
                                }
                                highlighted: combobox.highlightedIndex == index
                            }
                                contentItem: AppText {
                                    width: combobox.width - combobox.indicator.width - combobox2.spacing
                                    text: combobox.displayText
                                    wrapMode: Text.NoWrap
                                }
                            }
            
            D Offline
            D Offline
            Diracsbracket
            wrote on 28 Aug 2018, 02:31 last edited by
            #5

            @Ldweller said in Populate Combobox from firebase callback:

            this reads/displays my titles which I have added to the code

            Simply send out a query to the database which returns all your titles. Isn't that what you tried to do in your first post?

            From the query result string returned by the server, extract all your title info and put those in an array (as you did so far) or a model and assign that array or model to your combobox.

            1 Reply Last reply
            0
            • L Offline
              L Offline
              Ldweller
              wrote on 28 Aug 2018, 21:14 last edited by
              #6

              Hey @Diracsbracket
              apologies for the confusion - I have been trying to read the query from my database and am struggling to do so. I altered the array to ensure it worked but when applying to my query I am unsuccessful! Should I start another post for that concern?? As it would be based on querying the database!

              D 1 Reply Last reply 29 Aug 2018, 03:02
              0
              • L Ldweller
                28 Aug 2018, 21:14

                Hey @Diracsbracket
                apologies for the confusion - I have been trying to read the query from my database and am struggling to do so. I altered the array to ensure it worked but when applying to my query I am unsuccessful! Should I start another post for that concern?? As it would be based on querying the database!

                D Offline
                D Offline
                Diracsbracket
                wrote on 29 Aug 2018, 03:02 last edited by Diracsbracket
                #7

                @Ldweller said in Populate Combobox from firebase callback:

                Should I start another post for that concern??

                That would be the right thing to do; but since it is not Qt related but more related to the Firebase API, maybe a Firebase forum would be of more help for your problem?

                Out of curioisity, which solution are you using for accessing the Firebase database? This:
                https://github.com/Larpon/QtFirebase
                ?

                L 1 Reply Last reply 29 Aug 2018, 10:55
                0
                • D Diracsbracket
                  29 Aug 2018, 03:02

                  @Ldweller said in Populate Combobox from firebase callback:

                  Should I start another post for that concern??

                  That would be the right thing to do; but since it is not Qt related but more related to the Firebase API, maybe a Firebase forum would be of more help for your problem?

                  Out of curioisity, which solution are you using for accessing the Firebase database? This:
                  https://github.com/Larpon/QtFirebase
                  ?

                  L Offline
                  L Offline
                  Ldweller
                  wrote on 29 Aug 2018, 10:55 last edited by
                  #8

                  @Diracsbracket said in Populate Combobox from firebase callback:

                  @Ldweller said in Populate Combobox from firebase callback:

                  Should I start another post for that concern??

                  That would be the right thing to do; but since it is not Qt related but more related to the Firebase API, maybe a Firebase forum would be of more help for your problem?

                  Out of curioisity, which solution are you using for accessing the Firebase database? This:
                  https://github.com/Larpon/QtFirebase
                  ?

                  @Diracsbracket I am using Vplay as my IDE - they are providing growing support for firebase realtime database. No access for cloud firestore as of yet but it works for authentication, read/write, userValues and realtimeValues at current which ties in with what i am developing! Thanks for all your help though!!

                  1 Reply Last reply
                  0
                  • L Offline
                    L Offline
                    Ldweller
                    wrote on 23 Sept 2018, 21:28 last edited by
                    #9

                    Hi @Diracsbracket (or anyone else around)

                    I know it's been a while since we dealt with my post, and once again thanks for all your help!

                    I have managed to get the multiple query working (massive booboo moment from me)
                    Even with this working (It's reading the values for firebase in my log), I am unable to push the data to my combobox using your above suggestions, As I mentioned before I implemented this using individual reads on each key/value then pushing to my array, yet when applying to the array I get the following message in my log:

                    file:MyDiary//qml/Main.qml:260: Unable to assign QJSValue to QString

                    line 260 of my code is --- "text: modelData" linking to my combobox's "model: myArray [""]"

                    The code in my query is below,

                                firebaseDb.getValue("public/bigqueryobject", {
                                                        orderByKey: true,
                                                        startAt: 0,
                                                        endAt: 1000,
                                                        limitToFirst: 5
                                                    }, function(success, key, value) {
                                                        if(success) {
                                                            console.debug("Read value for key ", key, "fromFBDB: ", value);
                                                            myArray.push(value); combobox.model = myArray
                                                        }
                                                    })
                    

                    What can you see that I am doing wrong with this?

                    Thanks!!

                    D 1 Reply Last reply 24 Sept 2018, 06:12
                    0
                    • L Ldweller
                      23 Sept 2018, 21:28

                      Hi @Diracsbracket (or anyone else around)

                      I know it's been a while since we dealt with my post, and once again thanks for all your help!

                      I have managed to get the multiple query working (massive booboo moment from me)
                      Even with this working (It's reading the values for firebase in my log), I am unable to push the data to my combobox using your above suggestions, As I mentioned before I implemented this using individual reads on each key/value then pushing to my array, yet when applying to the array I get the following message in my log:

                      file:MyDiary//qml/Main.qml:260: Unable to assign QJSValue to QString

                      line 260 of my code is --- "text: modelData" linking to my combobox's "model: myArray [""]"

                      The code in my query is below,

                                  firebaseDb.getValue("public/bigqueryobject", {
                                                          orderByKey: true,
                                                          startAt: 0,
                                                          endAt: 1000,
                                                          limitToFirst: 5
                                                      }, function(success, key, value) {
                                                          if(success) {
                                                              console.debug("Read value for key ", key, "fromFBDB: ", value);
                                                              myArray.push(value); combobox.model = myArray
                                                          }
                                                      })
                      

                      What can you see that I am doing wrong with this?

                      Thanks!!

                      D Offline
                      D Offline
                      Diracsbracket
                      wrote on 24 Sept 2018, 06:12 last edited by
                      #10

                      @Ldweller said in Populate Combobox from firebase callback:

                      file:MyDiary//qml/Main.qml:260: Unable to assign QJSValue to QString

                      This error message is rather self-explanatory, it seems?

                      Although I have no idea what the text property is (because ComboBox has no text property), I'll assume that it is part of some delegate and that it expects a string value. To this property, you try to assign an item of the model, which, as the error shows, is not a string. Your model is thus not an array of strings but an array of QJSValue. This can only mean that in

                      myArray.push(value);

                      value is not a JS String but an object with some structure, probably the various result records of your query. You know best what the structure of that object is. Extract the string info from that object you want to add to your array model.

                      1 Reply Last reply
                      1
                      • L Offline
                        L Offline
                        Ldweller
                        wrote on 24 Sept 2018, 07:23 last edited by
                        #11

                        Hey @Diracsbracket
                        Sorry if it's an obvious issue, i'm relatively new t Qt!
                        You are correct in that the text is from the delegate, full code for section is:

                                        Quick2.ComboBox {
                                            id: combobox
                                            visible: registerCheckbox.checked ? true : false
                                            Layout.preferredWidth: dp(200)
                                            padding: dp(12)
                        
                                            model: myArray [""]
                        
                                            delegate: Quick2.ItemDelegate {
                                            width: combobox.width
                                            height: combobox.height
                                            padding: dp(12)
                                            contentItem: AppText {
                                                text: modelData
                                                color: highlighted ? Theme.tintColor : Theme.textColor
                                                wrapMode: Text.NoWrap
                                            }
                                            highlighted: combobox.highlightedIndex == index
                                        }
                                    }
                        

                        The value is each of the titles read, and ordered alphabetically, so I need to extract this string to add? I will look into how to do this (as currently clueless haha)!

                        Thanks!

                        D 1 Reply Last reply 25 Sept 2018, 06:49
                        0
                        • L Ldweller
                          24 Sept 2018, 07:23

                          Hey @Diracsbracket
                          Sorry if it's an obvious issue, i'm relatively new t Qt!
                          You are correct in that the text is from the delegate, full code for section is:

                                          Quick2.ComboBox {
                                              id: combobox
                                              visible: registerCheckbox.checked ? true : false
                                              Layout.preferredWidth: dp(200)
                                              padding: dp(12)
                          
                                              model: myArray [""]
                          
                                              delegate: Quick2.ItemDelegate {
                                              width: combobox.width
                                              height: combobox.height
                                              padding: dp(12)
                                              contentItem: AppText {
                                                  text: modelData
                                                  color: highlighted ? Theme.tintColor : Theme.textColor
                                                  wrapMode: Text.NoWrap
                                              }
                                              highlighted: combobox.highlightedIndex == index
                                          }
                                      }
                          

                          The value is each of the titles read, and ordered alphabetically, so I need to extract this string to add? I will look into how to do this (as currently clueless haha)!

                          Thanks!

                          D Offline
                          D Offline
                          Diracsbracket
                          wrote on 25 Sept 2018, 06:49 last edited by
                          #12

                          @Ldweller said in Populate Combobox from firebase callback:

                          The value is each of the titles read, and ordered alphabetically

                          Since you know the structure of the value object, and since it is not a JS array, you must extract each of those title strings from this value object, push them onto your JS array and use that array as model. If you need help on how to do that, I think it would be best to review your JavaScript basics.

                          There are many good JS references:
                          https://developer.mozilla.org/en-US/docs/Web/JavaScript

                          http://doc.qt.io/qt-5/qtqml-javascript-functionlist.html

                          Good luck.

                          1 Reply Last reply
                          1

                          • Login

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Groups
                          • Search
                          • Get Qt Extensions
                          • Unsolved