Displaying images from json file in tableview - ios

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:
Ok So I added the following code to cellforrowatindexpath and it doesn't do anything:
[[cell imageView] setImage: [UIImage imageNamed:droneObject.dronePic]];

Answer 1

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 :)

Answer 2

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]];

Answer 3

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];
}

Answer 4

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):
Multithreading and Grand Central Dispatch for iOS Beginners Tutorial
Async image loading from url inside a UITableView cell - image changes to wrong image while scrolling
Asynchronous downloading of images for UITableView with GCD
iOS: How to Download Images Asynchronously (And make your UITableView Scroll Fast)
AFNetworking