Populate Combobox from firebase callback

Ldweller

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

Diracsbracket

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

Ldweller

@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

Ldweller

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

Diracsbracket

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

Ldweller

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!

Diracsbracket

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

Ldweller

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

Ldweller

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

Diracsbracket

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

Ldweller

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!

Diracsbracket

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