SWIFT: Print data from firebase database in tableview - swift

Question

I am new to firebase.
I want to make an app with data from my Firebase database to show in a tableview.
Example:
Let's say I have made a database that looks like this:
{
"fruits": {
"Apple": {
"color": "Red",
"taste": "Bla bla...",
},
"Banana": {
"color": "Yellow",
"taste": "Bla bla...",
},
"Pear": {
"color": "Green",
"taste": "Bla bla...",
},
}
}
Firebase automatically sort the items in my database by alphabetic order. Now I want to make a tableview with all the fruits listed in alphabetic order. When I tap on a fruit it will push to a new window with the informations about that specific fruit like "color", "taste", etc.
The important thing to keep in mind is that, whenever I'm adding items to my database (like more types of fruit), it has to keep showing in alphabetic order. I HAVE read the documentation, but without any luck.
How do I do this? I know how to make tableviews and create databases. But how do I connect my database to my tableview and make it print out my data from a-z? maybe by index number?
Thank you. :-)

Answer 1

You may want to consider a different structure
fruits
fruit_id_0 <- key created with childByAutoId
name: "Apple"
color: "Red"
taste: "blah blah"
From there you have a ton of options.
One option is to use .childAdded, which will iterate over all of your nodes, one at a time and leave an observer which notifies the app whenever a new child is added. The dataSource array is ordered by name in code.
let fruitsRef = self.ref.child("fruits")
fruitsRef.observe(.childAdded, with: { snapshot in
let fruitDict = snapshot.value as! [String: Any]
let fruitName = fruitDict["name"] as! String
self.fruitArray.append(fruitName)
self.fruitArray.sort() //sorts in place
self.myTableView.reloadData()
})
From there, any time a new fruit is added the closure will be called. The newly added fruit is added, array sorted and UI updated.
If you have just a few entries the above is fine, but if you have a lot of fruit like I do, it would sort and update the tableView after each fruit is loaded, over and over which could cause flicker or other undesired results.
A better option would be to leverage the fact that .value observers occur after .child added observers. With that in mind, you can load up your entire initial dataset, and once that's complete, sort it and update the tableView. At the same time leaving an observer for new fruit which will add it to the dataSource, sort and update your UI.
Here's some code that would be initated with a button click
func button0() {
self.configureChildAdded()
self.setInitialLoadCompleted()
}
two class vars to keep track of where we are in the loading process and an array to store the fruit names
var initialLoad = true
var fruitArray = [String]()
and then two classes that will initially load and sort your fruits and leave a .childAdded observer which will watch for additional fruits and add them to the dataSource, sort, and update a tableView
func configChildAdded() {
let fruitsRef = self.ref.child("fruits")
fruitsRef.observe(.childAdded, with: { snapshot in //iterate over all fruits
let fruitDict = snapshot.value as! [String: Any]
let fruitName = fruitDict["name"] as! String
self.fruitArray.append(fruitName)
//upon first load, don't reload the tableView until all children are loaded
if ( self.initialLoad == false ) {
self.fruitArray.sort()
self.myTableView.reloadData()
}
})
}
//this .value event fires AFTER the child added events to load the tableView the first time
// all this does is update the UI and set the initalLoad to true and only fires once
func setInitialLoadCompleted() {
let fruitsRef = self.ref.child("fruits")
fruitsRef.observeSingleEvent(of: .value, with: { snapshot in
self.myTableView.reloadData()
self.initialLoad = false
})
}
Note that using this method will totally avoid using any kind of Firebase ordering as it's done in code. This would make it much easier to do multi field ordering etc.