Swift: Array Struct Image not visible in TableView - json

Question

me again with a new Question.
I´m gathering Picture Data from some JSON and fill it in an Array with a Struct as Datatype.
Everything works fine but when I try to display it in a TableView the Image is Missing - rest of Data is Displaying as wanted.
But the Images seems to store in the Array too (See print after guard ---new pic added---).
Also Dispatch Group is completing with "All Done".
Would be great if you could take a look and tell me what I´m doing wrong.
Array:
var memeRawData: [MemeRawData] = []
Struct:
struct MemeRawData {
let name: String?
let url: String?
let img: UIImage?
}
Dispatch Group to gather Data from JSON and Download Image and append it to array:
var meme = MemeRawData(name: "", url: "", img: UIImage())
var memeName = ""
var memeURL = ""
var memeIMG = UIImage()
let g = DispatchGroup()
MemeAPI.requestAPIImageData { (imgData, error) in
imgData?.data.memes.forEach{
memeData in
g.enter()
memeName = memeData.name!
memeURL = memeData.url!
MemeAPI.requestAPIImageFile(url: URL(string: memeData.url!)!) { (image, error) in
guard let image = image else {
print("PIC IS NIL")
return
}
memeIMG = image
print("-----NEW PIC ADDED-------")
}
meme = MemeRawData(name: memeName, url: memeURL, img: memeIMG)
self.memeRawData.append(meme)
g.leave()
}
g.notify(queue:.main) {
print("All done")
}
}
Function to get the Image from URL:
class func requestAPIImageFile(url: URL, completionHandler: #escaping (UIImage?, Error?) -> Void) {
let task = URLSession.shared.dataTask(with: url) { (data, response, error) in
guard let data = data else {
completionHandler(nil, error)
return}
let downloadedImage = UIImage(data: data)
completionHandler(downloadedImage, nil)
}
task.resume()
}
And to complete it tableView dequeue:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "memeAPICell")
cell?.textLabel?.text = memeRawData[indexPath.row].name
cell?.imageView?.image = memeRawData[indexPath.row].img
return cell!
}
Like I said JSON Parsing is working fine since I can display all URL´s and Names - but there seems to be a Problem with the Images. Also Console is not Printing out any Error.
Thanks in advance!

Answer 1

You need to set the image in main thread,
write this function,
func setImage(imageView:UIImageView,url:URL){
let task = URLSession.shared.dataTask(with: url){ (data, response, error) in
if error != nil{
return
}
DispatchQueue.main.async {
let img = UIImage(data: data!)
imageView.image = img
}
}
task.resume()
}
then call it in cellForItemAt
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "memeAPICell")
cell?.textLabel?.text = memeRawData[indexPath.row].name
self.setImage(imageView:cell!.imageView!, url: URL(string: memeRawData[indexPath.row].url)!)
return cell!
}

Answer 2

Set up your data array as you are already, and then for each element, download the image. it won't be available the first time you show the tableview, but that's ok. You have options for how you show that something is coming, here's a simple way to do it.
override func viewDidLoad() {
super.viewDidLoad()
// set up your meme data as you do already
// go get images in the background
for index in 0...memeRawData.count-1 {
print("Go get data for \(index)")
getImage(index: index, url: URL(string: memeRawData[index].url ?? "")!)
}
}
func getImage(index: Int, url:URL){
let task = URLSession.shared.dataTask(with: url){ (data, response, error) in
if error != nil{
return
}
DispatchQueue.main.async {
print("ready to reload /(index)")
// now that you have the image, add it to your data array
self.memeRawData[index].img = UIImage(data: data!)
// now reload the specific row in your tableview
self.tableView.reloadRows(at: [IndexPath(row: index, section: 0)], with: .automatic)
}
}
task.resume()
}
then all you have to do is modify the way you display the tableview cell. In this example, if there's no image available, I have changed the text display, but you could replace the image with a picture to show waiting, and if you have that included in your assets, you can have it available to display.
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "memeAPICell")
if memeRawData[indexPath.row].img == nil
{
cell?.textLabel?.text = memeRawData[indexPath.row].name! + " awaiting image ..."
}
else
{
cell?.textLabel?.text = memeRawData[indexPath.row].name ?? "title"
}
cell?.imageView?.image = memeRawData[indexPath.row].img
return cell!
}