swift: Retrieving images from "Parse" - ios

Question

Im new in Parse(parse.com). I have such kind of table in parse.com:
And I wanna retrieve these 3 images and put are in table view row. And here is my code:
class LeaguesTableViewController: UITableViewController {
var leagues = [PFObject]() {
didSet {
tableView.reloadData()
}
}
var leaguesImage = [NSData]() {
didSet {
tableView.reloadData()
}
}
override func viewDidLoad() {
super.viewDidLoad()
loadData()
tableView.registerClass(LeaguesTableViewCell.self, forCellReuseIdentifier: "ReusableCell")
}
// MARK: - Table view data source
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return leagues.count
}
override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 160
}
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("ReusableCell", forIndexPath: indexPath) as! LeaguesTableViewCell
cell.leagueImage.image = UIImage(data: leaguesImage[indexPath.row])
cell.leagueNameLabel.text = leagues[indexPath.row]["name"] as? String
return cell
}
// MARK: Parse
func loadData() {
let query = PFQuery(className: "Leagues")
query.findObjectsInBackgroundWithBlock { (objects, error) in
if( objects != nil && error == nil) {
// List of leagues
for i in objects! {
self.leagues.append(i)
// Retrieve images
let imageFile = i["image"] as? PFFile
imageFile!.getDataInBackgroundWithBlock { (imageData: NSData?, error: NSError?) -> Void in
if error == nil {
if let imageData = imageData {
self.leaguesImage.append(imageData)
}
}
}
}
} else if error != nil {
print("Error is: \(error)")
}
}
}
}
Here is my code and from my point of view is everything is ok. But I have error: Index out of the range. My leaguesImages array is empty. Thank you.

Answer 1

Your problem is that leagues and leaguesImages are getting out of sync. Once you retrieve the array from Parse, you are adding the leagues immediately, but leaguesImages are only being added after getDataInBackgroundWithBlock completes.
Instead of downloading the image data right away and storing it in a separate array, I would add a leagues property to your custom cell, and in there I would download the data and apply the image.
Populating an array like you are populating the leaguesImages array is a bad idea when the order matters, because you don't know which one will finish downloading first, maybe the second league image is the smallest, and it will be set as the image for the first league. (PS: image size is not the only thing that dictates how long a download will take)