I am currently working on an iPhone app using the PhoneGap project as a base. PhoneGap allows me to use my current web development knowledge to develop an application using HTML, CSS, and Javascript. A key component in almost all iPhone applications is retrieval of remote content. I am going to walk you through the steps I took while developing the iPhone app for Northwest Nazarene University.

For ease of development purposes I have downloaded the jQuery library, version 1.4.2, to my local machine.

Let’s start by creating a basic HTML file that we will manipulate as we go.

We could statically build our own JSON string here, but since we are building an app to retreive remote content why don’t we use an external source. There is a weather module in the NNU iPhone app that will do nicely. You can find it here http://www.nnu.edu/iphone/api/weather.php (No longer online 🙁 ) and the output should look something like

{"temp":["70"],"condition":["Fair"]}

(At the time of writing this was correct, but the site is still in development and may change slightly)

Great, we have our source, now we need to pull the content from it. Luckily jQuery provides some handy tools for grabbing remote content, and specifically for JSON data. Here is where the first trick comes in, cross site scripting (XSS). XSS happens when a Javascript service attempts to pull content from another server. XSS has been used for malicious purposes in the past and is therefore tightly controlled. jQuery is supposed to be able to legitimately access remote content, but if you are having problems see my post Enabling XSS for iPhone apps with PhoneGap and jQTouch to learn how to configure your Apache server to allow the remote pull.

Let’s see what the jQuery code looks like

$.getJSON('http://www.nnu.edu/iphone/api/weather.php', function(data) {
  $('body').html('

' + data.temp + '

'
    + '

' + data.condition + '

');
});

Using $.getJSON we can provide a callback for the returned JSON. I am going to use a dynamic function in this example, however you can also point it to a function name you define elsewhere. See http://api.jquery.com/jQuery.getJSON/ for more information regarding the $.getJSON function.

After previewing the index.html file in your browser you should see

73

Fair

Congratulations, you have successfully pulled remote JSON into your app!

You can download the complete source code here

Complex Objects
Let’s take it a step further now and work with some complex objects. We will be using the NNU iPhone app’s JSON news feed located here http://www.nnu.edu/iphone/api/rssproxy.php?url=nnu_news (No longer online 🙁 ). I am not going to post the JSON string because it gets quite long. You can view it by loading that URI into your browser.

Again, create your initial basic HTML index file. We will reuse the one listed in the above section.

Now the code for this section is going to be a little more intense. The object we are getting back contains multiple array of information. We will need to loop over the array in order to grab the individual news elements and display their contents. jQuery provides us with the $.each function (See http://api.jquery.com/each/) which we can hand the JSON data off to and get to the good stuff. Let’s see what this code will look like

$.getJSON('http://www.nnu.edu/iphone/api/rssproxy.php?url=nnu_news', function(data) {
        $.each(data, function(i,item){
                $('body').append('' + item.title + '');
                $('body').append('
Published:' + item.pubDate + '');
                $('body').append('

' + item.description + '


');

        });
});

If everything was written correctly you should now see a listing of the news items when you refresh the index.html file in your browser.

You can download the full source here

Having Trouble?
If you are receiving a denied error from the server, or a 200 success message with no content you may be experiencing cross site scripting (XSS) issues. Take a gander at my post Enabling XSS for iPhone apps with PhoneGap and jQTouch to prevent this behavior in the future