如何显示以JSON返回的图像URL作为UITableViewCell的缩略图

Question

I have Parse cloud code that returns JSON to my iOS app. As can be seen in the JSON below, every item has an Image URL property. What I want to do is set the thumbnail of every UITableViewCell to the item's respective Image URL .

I know that this involves dealing with asynch behavior, so the cells have to wait for the images to load before displaying them. I've googled how to do this task, and I'm having trouble understanding how to go about it.

My attempt below using

 NSData *imageData = [NSData dataWithContentsOfURL:[NSURL [*matchCenterDictionary objectForKey:@"Image URL"]]];
    [[cell imageView] setImage:[UIImage imageWithData:imageData]];

gives me an error stating expected identifier .

MatchCenterViewController.m:

#import "MatchCenterViewController.h"
#import <UIKit/UIKit.h>

@interface MatchCenterViewController () <UITableViewDataSource, UITableViewDelegate>
@property (nonatomic, strong) UITableView *matchCenter;
@end

@implementation MatchCenterViewController


- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
    }
    return self;
}


- (void)viewDidLoad
{
    [super viewDidLoad];

    self.matchCenter = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewCellStyleSubtitle];
    self.matchCenter.frame = CGRectMake(0,50,320,self.view.frame.size.height-200);
    _matchCenter.dataSource = self;
    _matchCenter.delegate = self;
    [self.view addSubview:self.matchCenter];

    self.matchCenterArray = [[NSArray alloc] init];
}

- (void)viewDidAppear:(BOOL)animated
{
    self.matchCenterArray = [[NSArray alloc] init];

    [PFCloud callFunctionInBackground:@"MatchCenter"
                       withParameters:@{
                                        @"test": @"Hi",
                                        }
                                block:^(NSDictionary *result, NSError *error) {

                                    if (!error) {
                                         self.matchCenterArray = [result objectForKey:@"Top 3"];

                                        dispatch_async(dispatch_get_main_queue(), ^{
                                            [_matchCenter reloadData];
                                        });

                                        NSLog(@"Test Result: '%@'", result);
                                    }
                                }];
}




- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
     return [self.matchCenterArray count];
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    // Initialize cell
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (!cell) {
        // if no cell could be dequeued create a new one
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
    }

    // populate dictionary with results
    NSDictionary *matchCenterDictionary= [self.matchCenterArray objectAtIndex:indexPath.row];

    // title of the item
    cell.textLabel.text = [matchCenterDictionary objectForKey:@"Title"];
    // price of the item
    cell.detailTextLabel.text = [matchCenterDictionary objectForKey:@"Price"];



    NSData *imageData = [NSData dataWithContentsOfURL:[NSURL [*matchCenterDictionary objectForKey:@"Image URL"]]];
    [[cell imageView] setImage:[UIImage imageWithData:imageData]];




    return cell;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


/*
#pragma mark - Navigation


- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end

JSON being returned:

{
    "Top 3" =     (
                {
            "Image URL" = "http://thumbs1.ebaystatic.com/m/m43q-_-W_kKrSuwWbIO7msg/140.jpg";
            "Item URL" = "http://www.ebay.com/itm/New-AT-T-Moto-X-XT1058-Android-Smartphone-Black-16GB-/141304035108?pt=Cell_Phones";
            Price = "289.95";
            Title = "New AT&T Moto X XT1058 Android Smartphone Black 16GB";
        },
                {
            "Image URL" = "http://thumbs2.ebaystatic.com/m/mP5Gx55JuDEVZlmFodzuUow/140.jpg";
            "Item URL" = "http://www.ebay.com/itm/New-AT-T-Moto-X-XT1058-Android-Smartphone-White-16GB-/141302889485?pt=Cell_Phones";
            Price = "289.95";
            Title = "New AT&T Moto X XT1058 Android Smartphone White 16GB";
        },
                {
            "Image URL" = "http://thumbs2.ebaystatic.com/m/mDMiorn4BLSRBcU1EpbFPaA/140.jpg";
            "Item URL" = "http://www.ebay.com/itm/New-Motorola-Moto-X-16GB-White-10MP-AT-T-Branded-Unlocked-Android-Smartphone-/131194435025?pt=Cell_Phones";
            Price = "339.99";
            Title = "New Motorola Moto X 16GB White 10MP AT&T Branded Unlocked Android Smartphone";
        }
    );
}

Answer 1

This code:

[NSURL [*matchCenterDictionary objectForKey:@"Image URL"]]

Looks like the culprit to me... I would try:

[NSURL URLWithString:[matchCenterDictionary objectForKey:@"Image URL"]]

This does not cover the asynchronous network call you mentioned though... For that I would suggest using a PFImageView supplied by Parse instead of the built in imageView in the UITableViewCell. But there are a few ways to accomplish this task...

Answer 2

Your approach is good. But during reloading tableview your approach is not good. So you have to load images in imageview of UITableViewCell asynchronously. Please follow this link Loading an image into UIImage asynchronously