How to Access JSON Data

Most apps use some kind of data source to display content in the app. Facebook*, Twitter*, Instagram*, and Maps apps all access data from a server. They also provide REST APIs for app developers to create applications that use their data. In most cases, the data is available in JSON format, which is accessed asynchronously, parsed in the app and then displayed in the app’s user interface.

Below is an example of JSON output from time.jsontest.com, which outputs time information:

{
   "time": "09:12:58 PM",
   "milliseconds_since_epoch": 1384636378639,
   "date": "11-16-2013"
} 

Accessing JSON data from a website is straight forward as long as the data is served from the same domain. However accessing data from a different domain is prohibited by most web browsers because of the Same-Origin Policy, which is a security policy that only allows accessing DOM originating from same domain and prevents accessing different domains.

There are ways you can work around the Same-Origin Policy and access JSON data from different domain from a web application if the server supports one of the following methods:

  • JSON response header has Access-Control-Allow-Origin set to allow access to the domain: this is not very common since it poses a security risk. More information here.
  • JSON supports padding (JSONP): This is more commonly used by APIs to allow developers to access their data.

JSON data can be accessed from a HTML5 application by making XMLHttpRequest request, or most commonly done using jQuery methods $.ajax() or $.getJSON().

Below is an example of how you can access JSON data using $.getJSON() method:

$.getJSON("http://time.jsontest.com", function(data){
    alert(data);
}); 

If the JSON is padded then you can access it from different domain by specifying callback parameter in the URL:

 $.getJSON("http://time.jsontest.com?callback=?", function(data){
    alert(data);
});

Below is a sample app that demonstrates accessing 3 types of JSON data. First one is JSON with padding, second is JSON with Access-Control-Allow-Origin:* in response header and third is JSON without padding or Access-Control-Allow-Origin in response header. The sample code will try to get the JSON data and display it in an alert box.

The sample uses a JSON test website time.jsontest.com, which responds with current time data in JSON format and also allows you to configure the URL parameters so that the JSON response will have padding or Access-Control-Allow-Origin header setting.

The sample can be tried on web browser, you will notice that only the first two JSON types can be accessed, the third one fails because of Browser Same-Origin Policy.

Link to Sample Code

If the JSON data server does not support JSONP or does not have Access-Control-Allow-Origin header then typically the workaround is to setup a proxy server which will access JSON from the original source. If this proxy server is on the same domain as the webapp, the JSON data can then be accessed without any issues.

Accessing JSON Data in HTML5 Hybrid Apps Using the Intel® XDK

The Intel® XDK is a HTML5 cross platform app development tool that lets you write apps using web technologies (HTML5 + CSS + JavaScript*) and build apps that can be installed on Apple iOS*, Android*, Microsoft Windows Phone*, and many other platforms. For an overview of Intel XDK features, open https://xdk.intel.com/.

Intel XDK built Cordova apps provide a way to access JSON data when the JSON does not support padding or if the JSON response header does not have Access-Control-Allow-Origin. Cordova built apps allows you to make ajax calls with HTTP connections using native code which are not subject to cross-origin restrictions. All the app has to do is include cordova.js scripts in the HTML file. You can also restrict the URLs that the app can be allowed to access by providing a white list of URLs in the "Domain list" in the Intel XDK build settings. By default it is set to "*", which allows access to any URL.

cordova.js actual files are not required, it will be included automatically in when a Cordova app is built with Intel XDK, just the script tags should be included.

If you open the sample code (with cordova.js script tag included) in Intel XDK and test it on the simulator or test on real device using Intel App Preview app, you will notice that all 3 types of JSON can be accessed. You can also build a hybrid app for iOS, Android, Window Phone and other platforms using Intel XDK build service and test the sample app on a device.

If your app needs to authenticate user login information, see Using OAuth2 Authentication.

The Intel XDK Tabs Overview describes the Intel XDK cross-platform development tools you can use to develop apps based on HTML5/JavaScript/CSS code and build a hybrid apps for iOS, Android, Windows, and other platforms.

For more complete information about compiler optimizations, see our Optimization Notice.