How to display json image array in UITableView using multithreading?

Question

I have few images on my server whose names are stored in the phpmysql table. The table contains two fields: id and images. I have prepared a php to fetch the images in json encoded formatted as mentioned:

jsonFetch.php

<?php
$dbhost = "localhost";
$dbname = "userauth";
$dbuser = "root";
//$DB_Pass = "root";
$dbtable = "images";

@mysql_connect($dbhost, $dbuser);
$db = mysql_select_db($dbname);


$sql = "SELECT * FROM $dbtable";
$query = mysql_query($sql);

while($row = mysql_fetch_array($query))
    {
         $rows[] = array(
        //"id" => $row[0],
        "image" => $row[1]
        //"description" => $row['description']);
        );
    }

$json = json_encode($rows);
$callback = $_GET['images'];
echo $callback.$json ;   
//print_r($json);  

?>

Now, when i hit the url, i am getting following response:

[{"image":"./95462"},{"image":"./8838upload_image.jpg"}{"image":"./43185upload_image.jpg"},{"image":"/17426upload_image.jpg"}]

I am getting json array as above.

The next step is to display the above array in multithreaded manner in UITableView. I am getting the images from url when i hardcode them but when it comes to json parse, i am a noob. I have tried every possible manner in which json can be parsed so for you reference, i am posting the .m file. :

#import "json.h"

@interface profilePhotos(Private)
- (void) initialize;
- (void) loadImage:(id)arg;
- (void) updateTableView:(id)arg;
- (void) addImagesToQueue:(NSArray *)images;
- (void) addImagesToQueue:(NSArray *)arrayImages;
- (void) addImagesToQueue:(NSArray *)arrayDataFromServer;
- (void) showcommentView;
- (void) hidecommentView;
@end

@implementation profilePhotos
@synthesize photosTable;
@synthesize addPhotos;
@synthesize deletePhotos;
@synthesize back;
@synthesize imageQueue, loadedImages, imageLoaderOpQueue, commentView;
//@synthesize photosView;


-(void)initializeWith:(int)buttonTag{

tag = buttonTag;

NSLog(@"tag = %d", tag);
 }

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

 [self initialize];
 return self;
  }

 - (void) awakeFromNib
 {
   NSLog(@"AsyncImageLoadingViewController::awakeFromNib called");
   [super awakeFromNib];
    [self initialize];
   }

 - (void) viewDidLoad
 {
NSLog(@"AsyncImageLoadingViewController::viewDidLoad called");
[super viewDidLoad];
 }

 - (void) viewDidAppear:(BOOL)animated
{
 NSLog(@"AsyncImageLoadingViewController::viewDidAppear called");
 [super viewDidAppear:animated];


 NSArray *images = [NSArray arrayWithObjects:
                   @"http://dl.dropbox.com/u/9234555/avatars/ava01.gif",
                   @"http://dl.dropbox.com/u/9234555/avatars/ava02.gif",
                   @"http://dl.dropbox.com/u/9234555/avatars/ava03.gif",
                   @"http://dl.dropbox.com/u/9234555/avatars/ava04.gif",
                   @"http://dl.dropbox.com/u/9234555/avatars/ava05.gif", nil];

[self addImagesToQueue:images];  
NSLog(@"addImagesToQueue: %@",self);


 }


 #pragma mark -
 #pragma mark Private Methods

  /*!
  @method     
  @abstract   initializes class variables
  */
 - (void) initialize
    {
      NSLog(@"AsyncImageLoadingViewController::initialize called");

      NSMutableArray *a = [[NSMutableArray alloc] init];
      self.imageQueue = a;
      //[a release];

      a = [[NSMutableArray alloc] init];
      self.loadedImages = a;
      //[a release];

      NSOperationQueue *queue = [[NSOperationQueue alloc] init];
      self.imageLoaderOpQueue = queue;
      //[queue release];
       }

        /*!
       @method     
       @abstract   updates tableview for the newly downloaded image and scrolls the          tableview to bottom
       */
     - (void) updateTableView:(id)arg
        {
         NSLog(@"AsyncImageLoadingViewController::updateTableView called");

         if ((arg == nil) || ([arg isKindOfClass:[UIImage class]] == NO)) {
            return;
    }

    // store the newly downloaded image
    [self.loadedImages addObject:arg];
    //[arg release];

    // refresh tableview
    [self.photosTable reloadData];

    // scroll to the last cell of the tableview
    NSIndexPath *lastRow = [NSIndexPath indexPathForRow:([self.loadedImages count] - 1) inSection:0];
    [self.photosTable scrollToRowAtIndexPath:lastRow
                            atScrollPosition:UITableViewScrollPositionBottom
                                    animated:YES];
}

 /*!
 @method     
 @abstract   downloads images, this is the method that dispatches tasks in the operation q ueue
 */
- (void) loadImage:(id)arg
 {
   NSLog(@"AsyncImageLoadingViewController::loadImage called");

   if ((arg == nil) || ([arg isKindOfClass:[NSString class]] == NO)) {
    return;
    }

    // create a local autorelease pool since this code runs not on main thread
    //NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];

    // fetch the image
    NSLog(@"AsyncImageLoadingViewController::loadImage - will download image: %@", arg);
    NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:arg]];
    UIImage *image = [UIImage imageWithData:data];
    NSLog(@"image: %@",image);

    // update tableview with the downloaded image on main thread
    [self performSelectorOnMainThread:@selector(updateTableView:) withObject:image    waitUntilDone:NO];

    //[pool release];
     }

  /*!
  @method     
  @abstract   adds images to the queue and starts the operation queue to download them
   */
 - (void) addImagesToQueue:(NSArray *)images
   {
    NSLog(@"AsyncImageLoadingViewController::addImagesToQueue called");

    [self.imageQueue addObjectsFromArray:images];
    NSLog(@"addImagesToQueue Array: %@", self);

    // suspend the operation queue
    [self.imageLoaderOpQueue setSuspended:YES];

    // add tasks to the operation queue
     for (NSString *imageUrl in self.imageQueue) {
     NSInvocationOperation *op = [[NSInvocationOperation alloc] initWithTarget:self                                              selector:@selector(loadImage:) object:imageUrl];
      [self.imageLoaderOpQueue addOperation:op];
      // [op release];
       }

// clear items in the queue and resume the operation queue to start downloading images
[self.imageQueue removeAllObjects];
[self.imageLoaderOpQueue setSuspended:NO];
    }


 #pragma mark -
 #pragma mark UITableViewDataSource Methods

  - (NSInteger)tableView:(UITableView *)tableView
  numberOfRowsInSection:(NSInteger)section
    {

return [self.loadedImages count];



       }

  - (UITableViewCell *)tableView:(UITableView *)tableView
     cellForRowAtIndexPath:(NSIndexPath *)indexPath
      { 

   static NSString *CellIdentifier = @"CellIdentifier";

cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{       
    //cell = [[[UITableViewCell alloc] initWithStyle:UITableViewStyleGrouped      reuseIdentifier:CellIdentifier] autorelease];
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewStyleGrouped   reuseIdentifier:[NSString stringWithFormat:@"cellID%d",indexPath.row]];

    cell.accessoryType =UITableViewCellAccessoryNone;
    //cell.accessoryType =UITableViewCellAccessoryDisclosureIndicator;




  }

for(UIView *subviews in cell.subviews)
    [subviews removeFromSuperview];


     UIImageView *photo;
     photo=[[UIImageView alloc] init];
     [photo setImage:[self.loadedImages objectAtIndex:indexPath.row]];
     [photo setFrame:CGRectMake(0, 5, 150, 120)];
     [cell addSubview:photo];  
     return cell;
       }





    -(void)aMethod:(UIButton *)sender{

//[sender tag];

NSIndexPath *indexPath = [photosTable indexPathForCell: (UITableViewCell*)[[sender superview]superview]];

NSLog(@"[sender tag] is %d",[sender tag]);



if([sender tag]==indexPath.row){

    textField = (UITextField*)[cell viewWithTag:[sender tag]];
    textField.hidden=NO;
    }
  //}


    }



#pragma mark -
#pragma mark UITableViewDelegate Methods

-(void)tableView:(UITableView *)tableView
didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{

[tableView deselectRowAtIndexPath:indexPath animated:YES];


}




 - (void)didReceiveMemoryWarning
   {
   // Releases the view if it doesn't have a superview.
   [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
     }

   - (void)viewDidUnload{
     // [self setPhotosView:nil];
  [self setPhotosTable:nil];
  [self setAddPhotos:nil];
  [self setDeletePhotos:nil];
  [self setBack:nil];
  [super viewDidUnload];
  // Release any retained subviews of the main view.
  // e.g. self.myOutlet = nil;
      }

   - (BOOL)shouldAutorotateToInterfaceOrientation:(  UIInterfaceOrientation)interfaceOrientation
      {
       // Return YES for supported orientations
      return (interfaceOrientation == UIInterfaceOrientationPortrait);
       }

I believe that something is needed to be done in viewDidAppear method but what is it i don't understand.

Kindly, help me out. I have tried every possible json method . May be i am making some errors in that but i am all the way frustrated. Please help me please.

Answer 1

Dude..use following reference and you will get tutorial as working demo..

images in UITableView using multithreading

See this reference if you are new in iOS. It's simple

Hope, this will help you...