converting PFFile to UIImage with data and append to array

Question

I can see several similar threads on this site however none clarify how to get the data back out of the array.

I'm trying to a PFFile off a server and set it as the image in a collectionview

for object in packs {

      self.packName.append(object["packName"] as! String)
      self.packDescription.append(object["packDesctription"] as! String)

       var objectImage = object["file"] as! PFFile
       objectImage.getDataInBackground(block: { (imageData, error) in

        if error == nil {
           var myImage = UIImage(data: imageData!)
           self.packImage.append(myImage!)
        }
        })

  }

printing packImage presents a bunch of data: so there is something in it..

[<UIImage: 0x608000287210>, {259, 194}]
[<UIImage: 0x608000287210>, {259, 194}, <UIImage: 0x600000287350>, {259, 194}]
[<UIImage: 0x608000287210>, {259, 194}, <UIImage: 0x600000287350>, {259, 194}, <UIImage: 0x6080002870d0>, {249, 192}]
[<UIImage: 0x608000287210>, {259, 194}, <UIImage: 0x600000287350>, {259, 194}, <UIImage: 0x6080002870d0>, {249, 192}, <UIImage: 0x6080002873f0>, {222, 160}]
[<UIImage: 0x608000287210>, {259, 194}, <UIImage: 0x600000287350>, {259, 194}, <UIImage: 0x6080002870d0>, {249, 192}, <UIImage: 0x6080002873f0>, {222, 160}, <UIImage: 0x600000286ea0>, {255, 198}]
[<UIImage: 0x608000287210>, {259, 194}, <UIImage: 0x600000287350>, {259, 194}, <UIImage: 0x6080002870d0>, {249, 192}, <UIImage: 0x6080002873f0>, {222, 160}, <UIImage: 0x600000286ea0>, {255, 198}, <UIImage: 0x608000287670>, {261, 193}]
[<UIImage: 0x608000287210>, {259, 194}, <UIImage: 0x600000287350>, {259, 194}, <UIImage: 0x6080002870d0>, {249, 192}, <UIImage: 0x6080002873f0>, {222, 160}, <UIImage: 0x600000286ea0>, {255, 198}, <UIImage: 0x608000287670>, {261, 193}, <UIImage: 0x600000286cc0>, {259, 194}]
[<UIImage: 0x608000287210>, {259, 194}, <UIImage: 0x600000287350>, {259, 194}, <UIImage: 0x6080002870d0>, {249, 192}, <UIImage: 0x6080002873f0>, {222, 160}, <UIImage: 0x600000286ea0>, {255, 198}, <UIImage: 0x608000287670>, {261, 193}, <UIImage: 0x600000286cc0>, {259, 194}, <UIImage: 0x608000287800>, {189, 267}]
[<UIImage: 0x608000287210>, {259, 194}, <UIImage: 0x600000287350>, {259, 194}, <UIImage: 0x6080002870d0>, {249, 192}, <UIImage: 0x6080002873f0>, {222, 160}, <UIImage: 0x600000286ea0>, {255, 198}, <UIImage: 0x608000287670>, {261, 193}, <UIImage: 0x600000286cc0>, {259, 194}, <UIImage: 0x608000287800>, {189, 267}, <UIImage: 0x600000287620>, {259, 194}]

However when I try and set the image further down I get an error index out of range.

cell.imageCell.image = packImage[indexPath.row]

----------EDIT ATTACHED FULL CODE OF UICollectionViewDelegate ----------------

import UIKit
import Parse

private let reuseIdentifier = "Cell"

class PackViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate  {

    //have to drag in outlet because not in CVC anymore
    @IBOutlet var collectionView: UICollectionView!

    //var delegate: PackViewDelegate?

    var packName = [""]  // the total packs in the app
    var packDescription = [""]
    var packTitle = [""]
    var packImage = [UIImage]()

    override func viewDidLoad() {
        super.viewDidLoad()


        let packQuery = PFQuery(className: "Pack")

        packQuery.findObjectsInBackground(block: { (objectsArray, error) in
            if error != nil {
                print(error!)
            } else if let packs = objectsArray {

                self.packName.removeAll() // remove the empty strings
                //self.packImage.removeAll()
                self.packDescription.removeAll()

                for object in packs {

                    self.packName.append(object["packName"] as! String)
                    self.packDescription.append(object["packDesctription"] as! String)

                    // get the PFFile from the server
                    var objectImage = object["file"] as! PFFile
                    objectImage.getDataInBackground(block: { (imageData, error) in

                        if error == nil {
                            //convert the data to an image and append it to array
                            var myImage = UIImage(data: imageData!)
                            self.packImage.append(myImage!)
                            print(self.packImage)
                        }
                    })

                }

                //only works when create iboutlet of collection view because in VC not CVC
                self.collectionView?.reloadData()

            }
        })

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }


    // MARK: UICollectionViewDataSource

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }


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


    func UIColorFromHEX(hexValue: UInt) -> UIColor {
        return UIColor(
            red: CGFloat((hexValue & 0xFF0000) >> 16) / 255.0,
            green: CGFloat((hexValue & 0x00FF00) >> 8) / 255.0,
            blue: CGFloat(hexValue & 0x0000FF) / 255.0,
            alpha: CGFloat(1.0)
        )
    }


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


        cell.labelCell.text = packDescription[indexPath.row]

//////-------------------------------------------------------------- this is where it crashes
        cell.imageCell.image = packImage[indexPath.row]



        cell.imageCell.layer.masksToBounds = true
        cell.imageCell.layer.cornerRadius = cell.imageCell.frame.height/2

        cell.imageCell.layer.borderWidth = 3
        cell.imageCell.layer.borderColor = UIColorFromHEX(hexValue: 0x62aca2).cgColor

        return cell

    }


    public func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

            // handle the segue to JourneyViewController with variable "selectedPack"
            // not sure why you need to set the storyboard but it works
        let storyBoard : UIStoryboard = UIStoryboard(name: "Main", bundle:nil)
            //create instance of the viewcontroller
        let transportJourneyViewController = storyBoard.instantiateViewController(withIdentifier: "JourneyViewController") as! JourneyViewController
            //value to pass - has been defined in journey
        transportJourneyViewController.selectedPack = packName[indexPath.row]
            //present the vc
        self.present(transportJourneyViewController, animated:true, completion:nil)

    }


    @IBAction func logoutButtonTapped(_ sender: Any) {
        PFUser.logOut()
        if (PFUser.current() == nil) {
            performSegue(withIdentifier: "segueLogout", sender: self)
        } else {
            MyFunctions.createAlert(errorTitle: "Oops...", errorMessage: "Something happened when logging you out.", className: self)
        }
    }

} // class

Answer 1

I think there is problem in your array. your

packName.count > self.packImage.count

Use this array self.packImage at numberOfItemsInSectionto method to remove crash

Try this

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

Hope it will help you

Answer 2

indexPath.row

An index number identifying a row in a section of a table view.

indexPath.item

An index number identifying an item in a section of a collection view.

Use cell.imageCell.image = packImage[indexPath.item] instead of cell.imageCell.image = packImage[indexPath.row], because its a collection view. And check your numberOfItemsInSection in the collection view datasource its less than or equal to your array of packDescription, packImage.