Trouble indexing into array within asynchronous call, Swift - ios

Question

I'm trying to create a scrollView of "Match" object images that correlates to an array of "Match" objects within my view controller, so that if I tap onto an image of a "Match" in the scrollView, I can take the index of that image in my miniMatchesContainer, and use it to access the Match object within my array that that image corresponds to. I tried going about it with a for-loop, but the problem is that since I'm getting match images from the server asynchronously, the calls return out of order and so my containerView indexes are off (I've added an image of my console's print statemen to show what I mean). So now I'm at a bit of an impasse, and would appreciate some advice as to where to go from here. Should I change my approach? Is there something I'm missing? Code added below.
//function to create contentScrollView for MiniMyatches
func setupMiniContentScroll(contentScroll: UIScrollView) {
let scalar:Double = 4/19
let contentViewDimension = contentScroll.frame.width * CGFloat(scalar)
let contentScrollWidth = CGFloat(LocalUser.matches.count) * (contentViewDimension + CGFloat(12)) - CGFloat(12)
let matchManager = MatchesManager()
for index in 0..<LocalUser.matches.count {
let match = LocalUser.matches[index]
print("Match index: \(index), Match at Index: \(match.itemName)")
matchManager.retrieveMatchThumbnail(match) { img, error in
if let img = img {
//create the mini matches views
let xOrigin = index == 0 ? 12 : CGFloat(index) * contentViewDimension + (CGFloat(12) * CGFloat(index) + CGFloat(12))
let contentFrame = CGRectMake(xOrigin, 10, contentViewDimension, contentViewDimension)
let contentView = self.makeMiniContentView(contentFrame, image: img, matchedPrice: match.matchedPrice)
let tap = UITapGestureRecognizer(target: self, action: #selector(BrowseViewController.toggleItemInfo(_:)))
contentView.addGestureRecognizer(tap)
self.miniMatchContainer.append(contentView)
print("MiniMatchContainer Index: \(self.miniMatchContainer.indexOf(contentView)), Match at Index: \(match.itemName)")
//update the contentScrollView
dispatch_async(dispatch_get_main_queue()) {
let contentLabelFrame = CGRect(x: xOrigin, y: contentFrame.height + 15, width: contentFrame.width, height: 20)
let contentLabel = self.makeMiniContentLabel(contentLabelFrame, itemName: match.itemName)
let priceLabel = self.makeMiniPriceLabel(contentFrame, matchedPrice: match.matchedPrice)
contentScroll.addSubview(contentView)
contentScroll.addSubview(contentLabel)
contentScroll.addSubview(priceLabel)
contentScroll.contentSize = CGSizeMake(contentScrollWidth + CGFloat(16), contentScroll.frame.height)
}
}
}
}
}

Answer 1

I would try:
print("MiniMatchContainer Index: \(index), Match at Index: \(match.itemName)")
Instead of:
print("MiniMatchContainer Index: \(self.miniMatchContainer.indexOf(contentView)), Match at Index: \(match.itemName)")
And I would create the content views outside retrieveMatchThumbnail, updating it inside.