Mastering iOS Frameworks: Working with and Parsing JSON

This chapter is from the book

Mastering iOS Frameworks: Beyond the Basics, 2nd Edition

Learn More Buy

This chapter is from the book

This chapter is from the book 

Mastering iOS Frameworks: Beyond the Basics, 2nd Edition

Learn More Buy

Getting JSON from the Server

To update the sample iOS app to handle JSON, the first thing to address is pulling the message list from the server and displaying it.

Building the Request

First, set up the URL so that the app can make calls to the right location:

NSString *const kMessageBoardURLString = @"http://freezing-cloud-6077.herokuapp.com/messages.json";

In the ICFViewController.m implementation, look at the viewWillAppear: method. This code will initiate the request to the server:

NSURL *msgURL = [NSURL URLWithString:kMessageBoardURLString];
NSURLSession *session = [NSURLSession sharedSession];

NSURLSessionTask *messageTask = [session dataTaskWithURL:msgURL completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
 ...
}];
[messageTask resume];

This creates and initiates a network request to the messages.json resource at the server URL. The network request will run asynchronously, and when data comes back the completion handler block will be called. The important thing to note is that nothing special is required here for JSON; this is a standard network call. The only difference is that the .json extension used in the URL tells the server that the response should be in JSON format. Other servers might use a Content-Type and/or Accept HTTP header that specifies application/json as the mime-type to indicate that a JSON response is desired.

Inspecting the Response

When the network request has returned, the completion handler will be called. In the sample app, the data is converted into a UTF-8 string so that it can be logged to the console. This should not be done for every request in a production app; it is done here to demonstrate how to see the response for debugging when a problem parsing JSON is encountered.

NSString *retString = [NSString stringWithUTF8String:[data bytes]];

NSLog(@"json returned: %@", retString);

The log message will display on the console the data received:

json returned: [{"message":{"created_at":"2012-04-29T21:59:28Z",
"id":3, "message":"JSON is fun!", "message_date":"2012-04-29",
"name":"Joe","updated_at":"2012-04-29T21:59:28Z"}},
{"message":{"created_at":"2012-04-29T21:58:50Z","id":2,
"message":"Learning about JSON", "message_date":"2012-04-
29","name":"Joe", "updated_at":"2012-04-29T21:59:38Z"}},
{"message":{"created_at":"2012-04-29T22:00:00Z","id":4,
"message":"Wow, JSON is easy.", "message_date":"2012-04-
29","name":"Kyle", "updated_at":"2012-04-29T22:00:00Z"}},
{"message":{"created_at":"2012-04-29T22:46:18Z","id":5,
"message":"Trying a new message.", "message_date":"2012-04-
29","name":"Joe", "updated_at":"2012-04-29T22:46:18Z"}}]

Parsing JSON

Now that JSON has been received from the server, it is just a simple step to parse it. In the case of the sample app, an array of messages is expected, so parse the JSON into an NSArray:

NSError *parseError = nil;
NSArray *jsonArray = [NSJSONSerialization JSONObjectWithData:data
                                                    options:0
                                                     error:&parseError];

if (!parseError) {
    [self setMessageArray:jsonArray];
    NSLog(@"json array is %@", jsonArray);
} else {
    NSString *err = [parseError localizedDescription];
    NSLog(@"Encountered error parsing: %@", err);
}

NSJSONSerialization’s method JSONObjectWithData:options:error: expects as parameters the data to be serialized, any desired options (for example, returning a mutable array instead of a regular array), and a reference to an NSError in case there are any parsing errors.

In this example, a local instance variable has been updated to the just-parsed array, the table view has been told to reload data now that there is data to display, and the activity view has been hidden. Note that the completion handler will most likely be called on a background queue, so if the user interface will be updated, it will be necessary to switch to the main queue.

dispatch_async(dispatch_get_main_queue(), ^{
    [self.messageTable reloadData];
    [self.activityView setHidden:YES];
    [self.activityIndicator stopAnimating];
});

Displaying the Data

Now that the JSON has been parsed into an NSArray, it can be displayed in a UITableView. The magic here is that there is no magic; the JSON received from the server is now just an array of NSDictionary instances. Each NSDictionary contains information for a message from the server, with attribute names and values. To display this in a table, just access the array and dictionaries as if they had been created locally.

- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MsgCell"];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"MsgCell"];

        cell.selectionStyle = UITableViewCellSelectionStyleNone;
    }
    NSDictionary *message = (NSDictionary *)[[self.messageArray objectAtIndex:indexPath.row] objectForKey:@"message"];

    NSString *byLabel = [NSString stringWithFormat:@"by %@ on %@", [message objectForKey:@"name"], [message objectForKey:@"message_date"]];

    cell.textLabel.text = [message objectForKey:@"message"];
    cell.detailTextLabel.text = byLabel;
    return cell;
}

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

The parsed JSON data will be visible in a standard table view, as shown in Figure 9.2.

Figure 9.2 Sample app message table view.

Posting a Message

The sample app includes ICFNewMessageViewController to post new messages to the server. There are two fields on that controller: one for a name and one for a message (see Figure 9.3). After the user enters that information and hits Save, it will be encoded in JSON and sent to the server.

Figure 9.3 Sample app new message view.

Encoding JSON

An important detail for sending JSON to a Ruby on Rails server is to encode the data so that it mirrors what the Rails server provides. When a new message is sent to the server, it should have the same structure as an individual message received in the message list. To do this, a dictionary with the attribute names and values for the message is needed, and then a wrapper dictionary with the key “message” pointing to the attribute dictionary. This will exactly mirror what the server sends for a message. In the saveButtonTouched: method, set up this dictionary, like so:

NSMutableDictionary *messageDictionary = [NSMutableDictionary dictionaryWithCapacity:1];

[messageDictionary setObject:[nameTextField text]
                      forKey:@"name"];

[messageDictionary setObject:[messageTextView text]
                      forKey:@"message"];

NSDate *today = [NSDate date];

NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];

NSString *dateFmt = @"yyyy'-'MM'-'dd'T'HH':'mm':'ss'Z'";
[dateFormatter setDateFormat:dateFmt];
[messageDictionary setObject:[dateFormatter stringFromDate:today]
                      forKey:@"message_date"];


NSDictionary *postDictionary = @{@"message" : messageDictionary};

Note that NSJSONSerialization accepts only instances of NSDictionary, NSArray, NSString, NSNumber, or NSNull. For dates or other data types not directly supported by NSJSONSerialization, they will need to be converted to a supported format. For example, in this example the date was converted to a string in a format expected by the server. Now that there is a dictionary, it is a simple step to encode it in JSON:

NSError *jsonSerializationError = nil;
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:postDictionary options:NSJSONWritingPrettyPrinted error:&jsonSerializationError];

if (!jsonSerializationError)
{
    NSString *serJSON =
    [[NSString alloc] initWithData:jsonData
                          encoding:NSUTF8StringEncoding];

    NSLog(@"serialized json: %@", serJSON);
        ...
} else
{
    NSLog(@"JSON Encoding failed: %@", [jsonSerializationError localizedDescription]);
}

NSJSONSerialization expects three parameters:

1. An NSDictionary or NSArray with the data to be encoded.
2. Serialization options (in our case, we specified NSJSONWritingPrettyPrinted so that it’s easy to read; otherwise, the JSON is produced with no whitespace for compactness).
3. A reference to an NSError.

If there are no errors encoding the JSON, it will look like this:

serialized json: {
  "message" : {
    "message" : "Six Test Messages",
    "name" : "Joe",
    "message_date" : "2012-04-01T14:31:11Z"
  }
}

Sending JSON to the Server

After the JSON is encoded, it is ready to be sent to the server. First, an instance of NSMutableURLRequest is needed. The request will be created with the URL for the server, and then will be customized with the HTTP method ("POST") and HTTP headers to indicate that the uploaded content data is in JSON format.

NSURL *messageBoardURL = [NSURL URLWithString:kMessageBoardURLString];

NSMutableURLRequest *request = [NSMutableURLRequest
                                requestWithURL:messageBoardURL
                        cachePolicy:NSURLRequestUseProtocolCachePolicy
                    timeoutInterval:30.0];

[request setHTTPMethod:@"POST"];

[request setValue:@"application/json"
forHTTPHeaderField:@"Accept"];

[request setValue:@"application/json"
forHTTPHeaderField:@"Content-Type"];

When the request is completed, an NSURLSessionUploadTask can be created. The task requires the request, the JSON data, and a completion handler. The completion handler will be called on a background thread, so any user interface updates must be dispatched to the main queue.

NSURLSession *session = [NSURLSession sharedSession];

NSURLSessionUploadTask *uploadTask =
[session uploadTaskWithRequest:uploadRequest fromData:jsonData completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {

    NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *)response;
    BOOL displayError = (error || httpResponse.statusCode != 200);

    dispatch_async(dispatch_get_main_queue(), ^{
        [self.activityView setHidden:YES];
        [self.activityIndicator stopAnimating];
        if (displayError) {
            NSString *errorMessage = error.localizedDescription;
            if (!errorMessage) {
                errorMessage = [NSString stringWithFormat:@"Error uploading - http status: %i", httpResponse.statusCode];
            }

            UIAlertController *postErrorAlertController = [UIAlertController alertControllerWithTitle:@"Post Error"
                                                 message:errorMessage
                                          preferredStyle:UIAlertControllerStyleAlert];

            [postErrorAlertController addAction: [UIAlertAction actionWithTitle:@"Cancel"
                                       style:UIAlertActionStyleCancel
                                     handler:nil]];

            [self presentViewController:postErrorAlertController
                               animated:YES
                             completion:nil];
        } else {
            [self.presentingViewController dismissViewControllerAnimated:YES
                                                              completion:nil];
        }
    });

}];
[uploadTask resume];

When resume is called on the uploadTask, the request will be made to the server, and the completion handler will be called when it is complete. Both the error returned in the completion handler and the response should be checked for errors; an error will be returned if there is a problem connecting (for example, the device is in airplane mode), or an HTTP status code might indicate a different problem if there is an issue on the server (for example, if the URL is not found, or if the server cannot process the data sent to it). If the request completes with no errors, the view controller will be dismissed and message board will be refreshed.

Summary

This chapter introduced JavaScript Object Notation (JSON). It explained how to request JSON data from a server in an iOS app, parse it, and display it in a table. The chapter also described how to encode an NSDictionary or NSArray into JSON, and send it over the network to a server.