Reading Remote JSON and Getting Image from URL

Question

In my iOS app I am trying to read in a JSON file and populate a table with its contents. Below is a sample of the JSON file.

Presently, I am reading the JSON into a mutable array called “items” and then populating the table cells like this.

// Populate the cell
if let showName = self.items[indexPath.row]["Show"] as? NSString {
            cell.textLabel!.text = showName as! String

I would like to have the image for each JSON record appear in the cell as well and that is where I am getting tripped up.

I have the URL to the image but how do I get it into the table cell?

My entire approach may be wrong so I would appreciate being pointed in the right direction.

{
        "shows": [{
                "Day": "Sunday",
                "Time": "12am",
                "Show": “Show Name Here",
                "imgPath": "http://remoteserver/image.jpg"
        }, {
                "Day": "Sunday",
                "Time": "1am",
                "Show": "Show Name Here",
                "imgPath": “http://remoteserver/image.jpg"

        }, {
                "Day": "Sunday",
                "Time": "2am",
                "Show": "Show Name Here",
                "imgPath": http://remoteserver/image.jpg"

        }

Possible duplicate of [How to load a image from url to UITableViewCell?](http://stackoverflow.com/questions/13303008/how-to-load-a-image-from-url-to-uitableviewcell) — Daniel, Apr 19 '16 at 14:05
Well, what have you tried? You need to download the images at the URL and in the completion block (after the download is finished) update the image placeholder with the downloaded image. There's a popular framework just for that: [SDWebImage](https://github.com/rs/SDWebImage) — dirkgroten, Apr 19 '16 at 14:07
I have tried the following in the tableView function. It does load the image however it loads the image on entries (or cells) that are not supposed to have the image. if let imgPath = self.items[indexPath.row]["imgPath"] as? NSString { let imgPath = NSURL(string: imgPath as String) let image = NSData(contentsOfURL: imgPath!) cell.imageView!.image = UIImage(data: image!) — Darin, Apr 19 '16 at 14:15
I realize that the code in my previous comment is not optimal as it is being executed on the main thread. — Darin, Apr 19 '16 at 14:18

score 1 · Answer 1 · answered Apr 19 '16 at 14:06

1

I'd recommend using a library like SDWebImage for this. That will provide you with methods for loading an image into an imageview asynchronously, and let you set a placeholder while the image is downloading. You can set an image from a url like this (copied from SDWebImage docs):

[cell.imageView sd_setImageWithURL:[NSURL URLWithString:@"http://www.domain.com/path/to/image.jpg"]
                  placeholderImage:[UIImage imageNamed:@"placeholder.png"]];

More info here: https://github.com/rs/SDWebImage

answered Apr 19 '16 at 14:06

BevTheDev

563
2
9

Also performs caching, which will significantly improve performance if you have a bunch of images in a tableView. so that new asynch requests won't happen for the same images while scrolling. – NSGangster Apr 19 '16 at 14:16
Thank you very much. I will look into this library. I have not used it before. – Darin Apr 19 '16 at 14:17
SDWebImage saved my life once. – NSGangster Apr 19 '16 at 14:17

score 0 · Answer 2 · answered Apr 19 '16 at 14:23

0

Apple has a example project for this using RSS. LazyTableImages This code is not in swift but will show exactly how apple handled this.

The problem it sounds like you are having is cells are being reused and your image is not being cleared or are being added to a reused cell.

answered Apr 19 '16 at 14:23

Jaybit

1,864
1
13
20

Thanks Jaybit. That appears to be what is happening. I will take a look at the example. – Darin Apr 19 '16 at 14:30

Reading Remote JSON and Getting Image from URL

2 Answers2