Array index out of range - Downloading images from Parse - ios

Question

I am trying to query images from parse, and when I open my app everything works correctly, but if I try and refresh I get this crash shown below...
Not too sure what is causing this...To explain a bit about how I have things set up :
I have a tableView with 1 cell, in that cell are three imageView connected to a collection Outlet. Then I am getting my images from parse and placing them in my imageViews, then in the numberOfRowsInSection I divide it by 3 so it doesn't repeat the image 3 times...!
Here's my code below:
var countries = [PFObject]()
override func viewDidLoad() {
super.viewDidLoad()
loadPosts()
// Do any additional setup after loading the view.
}
func loadPosts() {
PFUser.query()
// Build a parse query object
let query = PFQuery(className:"Post")
query.whereKey("user", equalTo: PFUser.currentUser()!)
query.orderByDescending("createdAt")
// Fetch data from the parse platform
query.findObjectsInBackgroundWithBlock {
(objects: [PFObject]?, error: NSError?) -> Void in
// The find succeeded now rocess the found objects into the countries array
if error == nil {
self.countries.removeAll(keepCapacity: true)
if let objects = objects {
self.countries = Array(objects.generate())
}
// reload our data into the collection view
self.tableView.reloadData()
} else {
// Log details of the failure
print("Error: \(error!) \(error!.userInfo)")
}
}
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
return countries.count / 3
}
var counter = 0
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
let cell = tableView.dequeueReusableCellWithIdentifier("cell2") as! bdbTableViewCell
for imageView in cell.threeImages {
let placeHolder = UIImage(named: "camera")
imageView.image = placeHolder
let finalImage = countries[counter++]["imageFile"]
finalImage!.getDataInBackgroundWithBlock {
(imageData: NSData?, error: NSError?) -> Void in
if error == nil {
if let imageData = imageData {
imageView.image = UIImage(data:imageData)
}
}
}}
return cell
}

Answer 1

If I understand your data, need to move to the spot in the array that has your country's first image, then iterate through the next 3 images.
Basically, you should move the counter declaration inside the function body and initialize it with the location of the first image. See the method definition below for the full implementation.
Your code works the first time by shear luck. Basically iOS will request the cell at row 1, and your counter will increment itself by getting images at index 0,1,and 2. Then iOS will request the cell at row 2, and it will pull images 3,4,5. The counter will keep incrementing. Then, when you refresh the table, the counter is still set to a number higher than the size of your images array, so you get a crash. You would also display image incorrectly if iOS for whatever reason asked for the cells in a different order. You need to use the indexPath.row parameter to get the right images.
Your code also does not account for additional images after the end of a multiple of 3. So if there are 17 images ,images 16 1nd 17 will not be given a row in the tableview. To correct that, add the following function:
func roundUp(value: Double) -> Int {
if value == Double(Int(value)) {
return Int(value)
} else if value < 0 {
return Int(value)
} else {
return Int(value) + 1
}
}
Then change the tableView's numberOfRowsInSection method to the following:
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
return roundUp(Double(countries.count / 3.0))
}
Finally, in your cellForRowAtIndexPath function, you will have to handle potentially trying to look for an image past the size of your array:
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
var imageIndex = (indexPath.row * 3)
let cell = tableView.dequeueReusableCellWithIdentifier("cell2") as! bdbTableViewCell
for imageView in cell.threeImages {
let placeHolder = UIImage(named: "camera")
imageView.image = placeHolder
if imageIndex < countries.count
{
let finalImage = countries[imageIndex++]["imageFile"]
finalImage!.getDataInBackgroundWithBlock {
(imageData: NSData?, error: NSError?) -> Void in
if error == nil {
if let imageData = imageData {
imageView.image = UIImage(data:imageData)
}
}
}
}
return cell
}
I believe this will fix all of your problems. I do suggest you take a tutorial on how UITableView works, as well as how to step through your own code to troubleshoot. That way you can understand why your original attempt wouldn't work.

Answer 2

var counter = 0
should be reset before function
cellForRowAtIndexPath

Answer 3

Problem
You declared counter variable as static. That's why it is not being reset between cellForRowAtIndexPath calls but it gets incremented each time the method is invoked.
Solution:
Move counter declaration to the function body. Like below:
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var counter = 0
let cell = tableView.dequeueReusableCellWithIdentifier("cell2") as! bdbTableViewCell
for imageView in cell.threeImages {
let placeHolder = UIImage(named: "camera")
imageView.image = placeHolder
let finalImage = countries[counter++]["imageFile"]
finalImage!.getDataInBackgroundWithBlock {
(imageData: NSData?, error: NSError?) -> Void in
if error == nil {
if let imageData = imageData {
imageView.image = UIImage(data:imageData)
}
}
}}
return cell
}