So now that we have the basics of installing JSON to our project, lets make a test application.

I started by creating a new project and used the Navigation Controller Template.

The first thing you want to do is setup your JSON environment as explained in the previous post and again you can visit the link above for instructions on how to do that.

Once it is setup you are ready to code. So the first thing is open up RootViewController.m and we need to import the JSON header so we can access it.

#import <JSON/JSON.h>

You need to synthesize the jsonArray

@synthesize jsonArray;

Now you want to edit the viewDidLoad function and make it look like this

- (void)viewDidLoad {
    // Add the following line if you want the list to be editable
    // self.navigationItem.leftBarButtonItem = self.editButtonItem;

    // init the url
    NSURL *jsonURL = [NSURL URLWithString:@"http://iphone.zcentric.com/test-json.php"];
    /*
     loading the contents of the URL into a string. At this point we should hit
     the json endpoint and put the contents of it in jsonData.
    */
    NSString *jsonData = [[NSString alloc] initWithContentsOfURL:jsonURL];

    /*
     we can verify the contents by looking at a NSLog if we open the console
    */
    //NSLog(jsonData);

    // converting the json data into an array
    self.jsonArray = [jsonData JSONValue]; 

    // this will return the array.. in the console it will still look a bit like json
    // but that is a array object.
    //NSLog(@"%@", jsonArray);

    // this will give the current count
    //NSLog(@"count is: %i", [self.jsonArray count]);

    // releasing the vars now
    [jsonURL release];
    [jsonData release];
}

I hope I gave good comments in the code. Basically what we are doing is loading a url and placing the contents into a string and then using json to turn it into an array object that we can use later.

Now my array in PHP looks like this

$array = array(
        0       => 'http://iphone.zcentric.com/files/1.jpg',
        1       => 'http://iphone.zcentric.com/files/2.jpg',
        2       => 'http://iphone.zcentric.com/files/3.jpg',
        3       => 'http://iphone.zcentric.com/files/4.jpg',
);

I use 0-3 as keys to make it easy to load the values into a new row.

Now we need to tell the application how many rows we have

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

Then in the cellForRowAtIndexPath function above the return cell we want to set the text.

cell.text = (NSString *)[self.jsonArray objectAtIndex:indexPath.row];

Now we want to free the memory

- (void)dealloc {
    [jsonArray dealloc];
    [super dealloc];
}

Now we are done with this file so save it and close it and open up RootViewController.h. You want it to look like this

#import 

@interface RootViewController : UITableViewController {
    NSMutableArray *jsonArray; // added this
}

@property (nonatomic, retain) NSMutableArray *jsonArray;  // added this

@end

You should know to do this by now.

Once you are done you should be able to compile your application and see 4 rows. Also feel free to use my test-json.php endpoint since I know it works.

The source code is right here. Have fun!