Objective-C: Asynchronously populate UITableView - how to do this?

Question

I can't seem to find any info on this question, so I thought I'd ask the community.

Basically, I have a UITableView and I want to show an activity indicator while its data is loading from my server.

Here is some example code of what I'm trying to do (I'm using ASIHttpRequest).

    //self.listData = [[NSArray alloc] initWithObjects:@"Red", @"Green", @"Blue", @"Indigo", @"Violet", nil];   //this works
    NSString *urlStr=[[NSString alloc] initWithFormat:@"http://www.google.com"];   //some slow request
    NSURL *url=[NSURL URLWithString:urlStr];

    __block ASIHTTPRequest *request=[ASIHTTPRequest requestWithURL:url];
    [request setDelegate:self];
    [request setCompletionBlock:^{
        self.listData = [[NSArray alloc] initWithObjects:@"Red", @"Green", @"Blue", @"Indigo", @"Violet", nil];   //this doesn't work...
        [table reloadData];

    }];
    [request setFailedBlock:^{

    }];
    [request startAsynchronous];

The dummy request to google.com does nothing - it just creates a delay and in the response I hope to repopulate the table with some JSON response from my own website.

But when I try to populate the table with the colours, nothing happens! I just get a blank table... If I uncomment the line above, it works fine, it's just on http responses things don't work for me.

Any suggestions greatly appreciated.

Edit:

I did a [self.tableView reloadData]; and now it works...

Answer 1

1. Stop using ASIHTTPRequest. NSURLConnection is not hard to use and will result in better, more performant code.
2. Your JSON response should be fed into a data structure not the UI. I recommend Core Data.
3. The data structure should feed your UITableView. Again, I recommend Core Data.

I would suggest reviewing how MVC works, you are short circuiting the design and that is the core problem.

SPOILER

Here is a more detailed how to. First you want the data retrieval to be async. Easiest and most reusable way to do that is build a simple NSOperation subclass.

@class CIMGFSimpleDownloadOperation;

@protocol CIMGFSimpleDownloadDelegate <NSObject>

- (void)operation:(CIMGFSimpleDownloadOperation*)operation didCompleteWithData:(NSData*)data;
- (void)operation:(CIMGFSimpleDownloadOperation*)operation didFailWithError:(NSError*)error;

@end

@interface CIMGFSimpleDownloadOperation : NSOperation

@property (nonatomic, assign) NSInteger statusCode;

- (id)initWithURLRequest:(NSURLRequest*)request andDelegate:(id<CIMGFSimpleDownloadDelegate>)delegate;

@end

This subclass is the most basic way to download something from a URL. Construct it with a NSURLRequest and a delegate. It will call back on a success or failure. The implementation is only slightly longer.

#import "CIMGFSimpleDownloadOperation.h"

@interface CIMGFSimpleDownloadOperation()

@property (nonatomic, retain) NSURLRequest *request;
@property (nonatomic, retain) NSMutableData *data;
@property (nonatomic, assign) id<CIMGFSimpleDownloadDelegate> delegate;

@end

@implementation CIMGFSimpleDownloadOperation

- (id)initWithURLRequest:(NSURLRequest*)request andDelegate:(id<CIMGFSimpleDownloadDelegate>)delegate
{
  if (!(self = [super init])) return nil;

  [self setDelegate:delegate];
  [self setRequest:request];

  return self;
}

- (void)dealloc
{
  [self setDelegate:nil];
  [self setRequest:nil];
  [self setData:nil];

  [super dealloc];
}

- (void)main
{
  [NSURLConnection connectionWithRequest:[self request] delegate:self];
  CFRunLoopRun();
}

- (void)connection:(NSURLConnection*)connection didReceiveResponse:(NSHTTPURLResponse*)resp
{
  [self setStatusCode:[resp statusCode]];
  [self setData:[NSMutableData data]];
}

- (void)connection:(NSURLConnection*)connection didReceiveData:(NSData*)newData
{
  [[self data] appendData:newData];
}

- (void)connectionDidFinishLoading:(NSURLConnection*)connection
{
  [[self delegate] operation:self didCompleteWithData:[self data]];
  CFRunLoopStop(CFRunLoopGetCurrent());
}

- (void)connection:(NSURLConnection*)connection didFailWithError:(NSError*)error
{
  [[self delegate] operation:self didFailWithError:error];
  CFRunLoopStop(CFRunLoopGetCurrent());
}

@synthesize delegate;
@synthesize request;
@synthesize data;
@synthesize statusCode;

@end

Now this class is VERY reusable. There are other delegate methods for NSURLConnection that you can add depending on your needs. NSURLConnection can handle redirects, authentication, etc. I strongly suggest you look into its documentation.

From here you can either spin off the CIMGFSimpleDownloadOperation from your UITableViewController or from another part of your application. For this demonstration we will do it in the UITableViewController. Depending on your application needs you can kick off the data download wherever makes sense. For this example we will kick it off when the view appears.

- (void)viewWillAppear:(BOOL)animated
{
  [super viewWillAppear:animated];

  NSURLRequest *request = ...;
  CIMGFSimpleDownloadOperation *op = [[CIMGFSimpleDownloadOperation alloc] initWithURLRequest:request andDelegate:self];
  [[NSOperationQueue mainQueue] addOperation:op];
  [self setDownloadOperation:op]; //Hold onto a reference in case we want to cancel it
  [op release], op = nil;
}

Now when the view appears an async call will go and download the content of the URL. In this code that will either pass or fail. The failure first:

- (void)operation:(CIMGFSimpleDownloadOperation*)operation didFailWithError:(NSError*)error;
{
  [self setDownloadOperation:nil];
  NSLog(@"Failure to download: %@\n%@", [error localizedDescription], [error userInfo]);
}

On success we need to parse the data that came back.

- (void)operation:(CIMGFSimpleDownloadOperation*)operation didCompleteWithData:(NSData*)data;
{
  [self setDownloadOperation:nil];
  NSLog(@"Download complete");

  //1. Massage the data into whatever we want, Core Data, an array, whatever
  //2. Update the UITableViewDataSource with the new data

  //Note: We MIGHT be on a background thread here.
  if ([NSThread isMainThread]) {
    [[self tableView] reloadData];
  } else {
    dispatch_sync(dispatch_get_main_queue(), ^{
      [[self tableView] reloadData];
    });
  }
}

And done. A few more lines of code for you to write but it replaces 13K+ lines of code that gets imported with ASI resulting in a smaller, leaner, faster application. And more importantly it is an app that you understand every single line of code.

Answer 2

This is the problem

request setCompletionBlock:^{
        self.listData = [[NSArray alloc] initWithObjects:@"Red", @"Green", @"Blue", @"Indigo", @"Violet", nil];   //this doesn't work...
        [table performSelectorOnMainThread:@selector(reloadTable) withObject:nil waitUntilDone:NO];    
    }];

The reload table needs to be done on the main thread.