XCode UITableView and UISearchBar with JSON Web Server

This tutorial is a quick tip for filtering a Data in UITableView with a search bar by UISearchBar. All of  apps in the worlds, users want their information fast.

Let's Start

Use this article for leaning about basic UITableView with JSON Webserver.

In this tutorial the URL of JSON is a same: http://thedarkdev.blogspot.com/2013/09/web-service-apps-in-ios7-json-with.html

Step 1: Add a UITableView in ViewController on MainStoryBoard.

Step 2: Add a UISearchBar at the top of UITableView.

Step 3: Link UITableView to delegate and datasource with ViewController icon (yellow), sure link UISearchBar to delegate too.

dataSource and delegate the UITableView 

delegate UISearchBar

Step 4: Open the ViewController.h and create the IBOutlet of UITableView with tableData and create UITableViewDataSource,UITableViewDelegate and UISearchBarDelegate in this header file like this:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UITableViewDataSource,UITableViewDelegate,UISearchBarDelegate>

@property (strong, nonatomic) IBOutlet UITableView *tableData;

@end

Step 5: Edit @interface like this:

@interface ViewController ()

{

NSMutableArray *allObject;

NSMutableArray *displayObject;

// A dictionary object

NSDictionary *dict;

// Define keys

NSString *provinceid;

NSString *provincename;

}

@end

Step 6: Open the ViewController.m insert this code in ViewDidLoad() method like this:

- (void)viewDidLoad

{

[super viewDidLoad];

// Define keys

provinceid = @"id";

provincename = @"title";

// Create array to hold dictionaries

allObject = [[NSMutableArray alloc] init];

NSData *jsonData = [NSData dataWithContentsOfURL:

[NSURL URLWithString:@"http://www.gooruism.com/?feed=json"]];

id jsonObjects = [NSJSONSerialization JSONObjectWithData:jsonData options:NSJSONReadingMutableContainers error:nil];

// values in foreach loop

for (NSDictionary *dataDict in jsonObjects) {

NSString *strProvinceID = [dataDict objectForKey:@"id"];

NSString *strProvinceName = [dataDict objectForKey:@"title"];

dict = [NSDictionary dictionaryWithObjectsAndKeys:

strProvinceID, provinceid,

strProvinceName, provincename,

nil];

[allObject addObject:dict];

}

displayObject =[[NSMutableArray alloc] initWithArray:allObject];

// Do any additional setup after loading the view, typically from a nib.

}

Step 7: Make UITableView Work with JSON:

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

{

return displayObject.count;

}

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

{

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

// Use the default cell style.

cell = [[UITableViewCell alloc] initWithStyle : UITableViewCellStyleSubtitle

reuseIdentifier : CellIdentifier];

}

NSDictionary *tmpDict = [displayObject objectAtIndex:indexPath.row];

NSString *cellValue = [tmpDict objectForKey:provincename];

cell.textLabel.text = cellValue;

return cell;

}

Step 8: Create UISearchBar , How its work, input keyword or searching through a keywords you want to see in Search Text Field it's will store in NSMutableArray.

- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString

{

if([searchString length] == 0)

{

[displayObject removeAllObjects];

[displayObject addObjectsFromArray:allObject];

}

else

{

[displayObject removeAllObjects];

for(NSDictionary *tmpDict in allObject)

{

NSString *val = [tmpDict objectForKey:provincename];

NSRange r = [val rangeOfString:searchString options:NSCaseInsensitiveSearch];

if(r.location != NSNotFound)

{

[displayObject addObject:tmpDict];

}

}

}

return YES;

}

- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar {

searchBar.text=@"";

[searchBar setShowsCancelButton:NO animated:YES];

[searchBar resignFirstResponder];

}

After This "Run" Your application and test it.

All Data from JSON

Use Keywords show 1 cell

another keyword 2 cells

Source Code: http://adf.ly/dSd86

Visit my site iPhone Developer and Game Developer in Thailand, iOS Dev Thailand Community (Site in Thai Language).

Facebook Fan Page: http://www.facebook.com/daydevthailand (ThaiLand)