Images not going straight into array

Question

I have a small problem with some code here. I am trying to populate a collection view with Five Names, descriptions and Images.

I am able to successfully to download all of the above into their respected arrays.

The problem is that the first time I perform the segue the image array has zero values in it. Then I go back a page and re-enter the page to find that all of the arrays have been populated successfully....

This is really annoying. Here is my code:

//arrays of names, descriptions and images
    var names:[String] = []
    var descriptions: [String] = []
    var imagesArray: [UIImage] = []

Heres where I get the images:

func downloadImages(){
        for x in 1...5{
            
            let url = URL(string: "https://www.imagesLocation.com/(x).png")
            
            let task = URLSession.shared.dataTask(with: url!){(data, response, error) in
                
                guard
                    let data = data,
                    let newImage = UIImage(data: data)
                    else{
                        print("Could not load image from URL: ",url!)
                        return
                }
                
                DispatchQueue.main.async {
                    self.imagesArray.append(newImage)
                }
            }
            
            task.resume()
        }
        
        loadDataFromFirebase()
    }
    

Heres where I download the Names and Descriptions from:

 func loadDataFromFirebase() {
        // Fetch and convert data
        let db = Firestore.firestore()
        db.collection(self.shopName).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
            }
        }
    }

Heres where I setup the collection view with the Names, Description and Images array contents:

func setupImages(){
    
    do {
        if imagesArray.count < 5 || names.count < 5  || descriptions.count < 5 {
            throw MyError.FoundNil("Something hasnt loaded")
        }
        
        self.pages = [
            Page(imageName: imagesArray[0], headerText: names[0], bodyText: descriptions[0]),
            
            Page(imageName: imagesArray[1], headerText: names[1], bodyText: descriptions[1]),
            
            Page(imageName: imagesArray[2], headerText: names[2], bodyText: descriptions[2]),
            
            Page(imageName: imagesArray[3], headerText: names[3], bodyText: descriptions[3]),
            
            Page(imageName: imagesArray[4], headerText: names[4], bodyText: descriptions[4]),
        ]
    }
    catch {
        print("Unexpected error: \(error).")
    }
}

As you can see from the image below, every array is populating successfully apart from the images array:

Here is the segue from the previous page's code:

DispatchQueue.main.async(){
            self.performSegue(withIdentifier: "goToNext", sender: self)   
        }

Any help is welcome :)

Answer 1

Your question is just a variant of the classic, "Why is my asynchronous function returning empty data?" I've answered a couple of these questions, and I'll include an analogy that explains the issue. You might understand the issue already, but I'll include it anyway for future readers:

Your mom is cooking dinner and asks you to go buy a lemon.

She starts cooking, but she has no lemon!

Why? Because you haven't yet returned from the supermarket, and your mom didn't wait.

^Source

---

The main issue here is that you are calling loadDataFromFirebase way too early. You assume that it will execute only after your URL requests have completed, but that is not the case. Why? Because the URL requests are executed asynchronously. That is, they run on another thread instead of blocking the thread that calls dataTask.resume. This is why, as Shashank Mishra suggests, you should use a DispatchGroup. Additionally, there is no guarantee that your images will load in the order that you begin the data tasks. I have included a fix below.

Generally, I would recommend defining variables strictly in the scopes in which you need them. Keeping names, descriptions, and images at such a high scope makes it too easy to make mistakes. I suggest refactoring your functions and deleting those three class-level arrays. Instead:

func loadDataFromFirebase(images: [UIImage]) {
    // same function as you posted, except make names and descriptions local variables and
    // replace self.setupImages() with:
    DispatchQueue.main.async {
        self.setupImages(images: images, names: names, descriptions: descriptions)
    }
}

func setupImages(images: [UIImage], names: [String], descriptions: [String]) {
    guard images.count == 5, names.count == 5, descriptions.count == 5 else {
        print("Missing data.")
        return
    }

    self.pages = (0..<5).map({ Page(image: images[$0], header: names[$0], body: descriptions[$0]) })
    // super important!!!
    tableView.reloadData()
}

Finally, here is my suggestion for a thread-safe downloadImages function:

func downloadImages() {
    var images = [UIImage?](repeating: nil, count: 5)
    let dispatchGroup = DispatchGroup()
    
    for i in 1...5 {
        dispatchGroup.enter()
        
        let url = URL(string: "https://www.imagesLocation.com/\(i).png")!
        URLSession.shared.dataTask(with: url) { (data, response, error) in
            guard let data = data, let image = UIImage(data: data) else {
                print("Could not load image from", url)
                dispatchGroup.leave()
                return
            }
            
            images[i] = image
            dispatchGroup.leave()
        }.resume()
    }
    
    dispatchGroup.notify(queue: .main) {
        guard images.allSatisfy({$0 != nil}) else {
            print("Failed to fetch all images.")
            return
        }
        self.loadDataFromFirebase(images: images.compactMap({$0}))
    }
}

As Fattie pointed out, you should use addSnapshotListener rather than getDocuments. Also, you should add the listener/get documents while downloading the images instead of after, which will be faster. However, I am not adding either to my answer because this is already quite long, and if you have trouble with it you can post another question.

Answer 2

You can use DispatchGroup to achieve asynchronous calls -

func downloadImages() {

   let dispatchGroup = DispatchGroup()

    for x in 1...5 {
         
         dispatchGroup.enter()
        
         let url = URL(string: "https://www.imagesLocation.com/(x).png")
         let task = URLSession.shared.dataTask(with: url!){(data, response, error) in
             guard
                 let data = data,
                 let newImage = UIImage(data: data)
                 else{
                     print("Could not load image from URL: ",url!)
                     dispatchGroup.leave()
                     return
             }
             self.imagesArray.append(newImage)
             dispatchGroup.leave()
         }
         task.resume()
     }
     dispatchGroup.notify(queue: DispatchQueue.main) {
        self.loadDataFromFirebase()
     }
 }

Call "loadDataFromFirebase()" method on getting all 5 responses as above. It will always have all images before loading it on view.

Answer 3

You're misunderstanding how Firebase works.

Essentially.

1. Don't use getDocuments. Use .addSnapshotListener

and

2. Basically each time the snapshot arrives, simply call .reloadData() on the table.

A full tutorial is beyond the scope of an answer here but there are many, many, tutorials around.

Just a typical fragment ...

    let db = Firestore.firestore().db.collection("yourCollection")
        .whereField("user", isEqualTo: uid)
        .addSnapshotListener { [weak self] documentSnapshot, error in
            guard let self = self else { return }
            
            guard let ds = documentSnapshot else {
                return print("error: \(error!)")
            }
            
            self.displayItems =  .. that data
            self.tableView.reloadData()
    }

Note the .reloadData()

Also ..

It's true that you can store an image (binary data) right in Firestore.

But really never, ever, do that - it's completely useless.

Simply use the dead-easy Firebase/Storage system where you can host images for free. Then they have completely normal URLs and so on.

Full tutorial: https://stackoverflow.com/a/62626214/294884