Displaying images from json file in tableview

Question

I have a json array and I am using the following to retrieve data:

- (void) retrieveData
{
    NSURL * url = [NSURL URLWithString:getDataURL];
    NSData * data = [NSData dataWithContentsOfURL:url];
    jsonArray = [NSJSONSerialization JSONObjectWithData:data options:kNilOptions error:nil];

    //set up cities array
    dronesArray = [[NSMutableArray alloc] init];

    //Loop json array
    for (int i = 0; i < jsonArray.count; i++)
    {
        //Create city/drone object
        NSString * dID = [[jsonArray objectAtIndex:i] objectForKey:@"id"];
        NSString * dName = [[jsonArray objectAtIndex:i] objectForKey:@"droneName"];
        NSString * dPic = [[jsonArray objectAtIndex:i] objectForKey:@"dronePic"];
        [dronesArray addObject:[[City alloc]initWithDroneName:dName andDronePic:dPic]];
    }
}

The above displays the cells fine:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

    // Configure the cell...

    City * droneObject;
    droneObject = [dronesArray objectAtIndex:indexPath.row];

    cell.textLabel.text = droneObject.droneName;

    //Accessory
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

    return cell;
}

But it only displays the Name, there is no image. The images are stored in URL format e.g. http://www.domain.com/image.jpg in the sql database. How can I import the images to make it look like this format:

enter image description here

Ok So I added the following code to cellforrowatindexpath and it doesn't do anything:

[[cell imageView] setImage: [UIImage imageNamed:droneObject.dronePic]];

First figure out how to display ONE image from a file. Then ONE image from a URL. Then figure out the multiple images thing. — Hot Licks, Jul 28 '14 at 15:58
you don't have any reference for imageView. Are you using storyboard? — Dipu Rajak, Jul 28 '14 at 16:02
Setting the image in the way that you've mentioned (`+imageNamed:`) implies that you have that image downloaded or in your bundle somewhere. In your case all you have is the URL. You need to download the image from that URL. — Aaron, Jul 28 '14 at 16:12

score 1 · Answer 1 · answered Jul 28 '14 at 16:01

Whenever you need to download the image from the url and set it into the UIImageView. The best mechanism is to fetch the image from the url and store them in the cache and also set the downloaded image to the UITableView.

Now, when you will scroll the tableView than its content will be updated and you need to check wether for specific visible cell image is already downloaded, if downloaded than set it to the UIImageView else download it from the server.

In order to do this Very efficiently use SDWebImage Library. This is the most trusted and easy to use library.

Hope this will help you. Happy Coding :)

score 1 · Answer 2 · answered Jul 28 '14 at 16:15

Assuming that you are trying to get image from url string

    NSURL *url = [NSURL URLWithString:droneObject.dronePic];
    NSData *data = [NSData dataWithContentsOfURL:url];
    UIImage *image = [UIImage imageWithData:data];
    [[cell imageView] setImage: [UIImage imageNamed:image]];

score 1 · Answer 3 · answered Jul 29 '14 at 15:12

This is how I did it. The part that you pull the json data, you store the image by retrieving it from a URL string.

connectionDidFinishLoading
    for (int i = 0; i < jsonArray.count; i++)
    {
        NSDictionary *jsonElement = jsonArray[i];
        Movies *newMovie = [[Movies alloc] init];
        newMovie.name = jsonElement[@"MovieID"];

        NSString *urlString = [NSString stringWithFormat:@"*url of the image*%@", jsonElement[@"fileImage"]]; 
        // www.example.com/img%@, /filename.jpg
        NSURL *imageURL = [NSURL URLWithString:urlString];
        NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
        UIImage *image = [UIImage imageWithData:imageData];

        newMovie.imageName = image;
        [_movies addObject:newMovie];
    }

I created an NSObject named Movies to store the image and additional fields.

Movies.h
    @property (nonatomic, strong) NSString *name;
    @property (nonatomic, strong) UIImage *imageName;

In my cellForRowAtIndexPath I create an imageview and set the image equal to the UIImage from Movies.h.

cellForRowAtIndexPath:
    Movies *item = _feedItems[indexPath.row];
    myImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,50,50)];
    myImageView.tag = indexPath.row;
    myImageView.image = item.imageName;
    [myCell addSubview:myImageView];

    return myCell;

_feedItems is an NSArray

- (void)itemsDownloaded:(NSArray *)items
{
    _feedItems = items;
    [self.listTableView reloadData];
}

score 0 · Answer 4 · edited May 23 '17 at 11:59

Short answer: Use AFNetworking and it's UIImageView category to set the cell's imageView's image in cellForRowAtIndexPath:

https://github.com/AFNetworking/AFNetworking/blob/master/UIKit%2BAFNetworking/UIImageView%2BAFNetworking.h

Long answer?

There are no images because you aren't setting the cell's imageView image property to anything in cellForRowAtIndexPath:. If you're working with just a URL you may want to consider loading and setting the images on your cell asynchronously so your table doesn't lock up as you scroll. This can be a tricky concept if you're new to it.

Anyway, there are lots of ways you can do this (and the AFNetworking solution does this for you out of the box):

I will only have about 20 items in the table so I don't think I should be that concerned about how fast it's scrolling. Is there a simple way of doing this by setting the imageView manually at CellForRowAtIndexPath? — cactus62, Jul 28 '14 at 15:58
@medictrader Aaron is right. It doesn't matter how many images you are about to display, you have to offload the operations (the fetching of the images from the urls in your case) to another thread in order to keep your UI unblocked. — Alladinian, Jul 28 '14 at 16:01

Displaying images from json file in tableview

4 Answers4