Data won't populate the UICollectionView scroll view

Question

I am brand new to this so please go easy on me!

My problem is as follows:

I am trying to populate a scroll view (UICollectionView) with data from firebase.

I am positive that it is retrieving the data successfully as I can print the data using a for loop at the end of the firebase function.

The problem is that when I try to insert the data into the scroll view it says the data is out of range!!

It has been pointed out to me that a scrollview is populated with the scrollView delegate methods which I have displayed below.

It was also pointed out to me that my data source is 'self.pages'. How to I pass the data retrieved from firebase to the delegate methods?

Fatal error: Index out of range

Here is my code:

//arrays of names and descriptions which are populated in firebase() function
    var names:[String] = []
    var descriptions: [String] = []

The page class:

 let imageName: UIImage
 let headerText: String
 let bodyText: String 

Here is the viewDidLoad

override func viewDidLoad() {
        super.viewDidLoad()

        firebase()
        setupImages()
    }

Here is the image set up function:

 func setupImages(){

        self.pages = [
            Page(imageName: self.image, headerText: names[0], bodyText: descriptions[0]),

            Page(imageName: self.image, headerText: names[1], bodyText: descriptions[1]),

            Page(imageName: self.image, headerText: names[2], bodyText: descriptions[2]),

            Page(imageName: self.image, headerText: names[3], bodyText: descriptions[3]),

            Page(imageName: self.image, headerText: names[4], bodyText: descriptions[4]),
        ]

        self.collectionView?.backgroundColor = .white
        self.collectionView?.register(PageCell.self, forCellWithReuseIdentifier: "cellId")
        self.collectionView?.isPagingEnabled = true
    }

I think the issue is caused by the firebase data not being retrieved quick enough.

I say this because I have another function in a different class that seems to set it up:

override init(frame: CGRect) {
        super.init(frame: frame)
        //setup layout sets up constraints for the layout of the page
        setupLayout()
    }

Adding the UICollectionViewDataSource method's:

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return pages.count
    }

and:

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId", for: indexPath) as! PageCell

        let page = pages[indexPath.item]
        cell.page = page
        return cell
    }

Firebase retrieval method:

func firebase()
    {
        //connection to firebase for the names and descriptions
        let db = Firestore.firestore()
        db.collection(restaurauntName).getDocuments { (snapshot, err) in

            if let err = err {
                print("Error getting documents: \(err)")
            } else {
                for document in snapshot!.documents {
                    let name = document.get("Name") as! String
                    let description = document.get("Description") as! String
                    //Add names and descriptions to the arrays
                    self.names.append(name)
                    self.descriptions.append(description)
                }
            }

            for x in self.names{
                print(x)
            }

        }
    }

Thank you for reading, any way someone can put me in the right direction would be appreciated!

Answer 1

Here's the issue, and your assumption is correct; the code is not flowing in the correct order.

override func viewDidLoad() {
   super.viewDidLoad()

   firebase()
   setupImages()
}

Firebase is asynchronous and your app needs to be structured in a way where you only attempt to work with Firebase data within the closure following the call. In your viewDidLoad function, you call firebase() to load the data but the setupImages function will actually execute before Firebase has had time to get the data from the server.

Fortunately, it's a simple fix. Here's the new functions with some updated names to make the flow more clear

override func viewDidLoad() {
   super.viewDidLoad()

   self.loadDataFromfirebase()
}

and then

func loadDataFromFirebase() {
   let db = Firestore.firestore()
   db.collection(restaurauntName).getDocuments { (snapshot, err) in
      if let err = err {
         print("Error getting documents: \(err)")
         return
      } else {
         for document in snapshot!.documents {
            let name = document.get("Name") as! String
            let description = document.get("Description") as! String
            self.names.append(name)
            self.descriptions.append(description)
         }
         self.setupImages() //safe to do this here as the firebase data is valid
         self.collectionView.reloadData()
      }
   }
}

the concern I have is if there 25 documents... your setupImages only accesses the first 5. Likewise, if there are 3 documents, the app will crash as that function would try to access objects at index 3, 4 and those won't exist.

Answer 2

Looking at your code: You are using self.pages as your data source. I can't see a connection to Firebase in the code that you provided here.

The error could as well come from how you setup the cell when you pass the page in

cell.page = page

To quickly debug you can comment that line out and see if the error disappears.