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)


Comments

  1. Hi, Great Post!!!! It works!!!!! Thx!!!

    ReplyDelete
  2. This works if you search something from the content or the author?

    ReplyDelete
  3. Replies
    1. How can I use it for all or some of the entries from the JSON for example content and title? Please help, thanks for aswering

      Delete

Post a Comment