Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Populate Combobox from firebase callback



  • 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



  • @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" ]
            }
        }
    


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



  • 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
                        }
                    }
    


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



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



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



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



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



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



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


Log in to reply