jsonparse.js

window.onload = function() {

    var request,

        url = "examples.json",

        section = document.getElementsByTagName('section')[0],

        categories = [],

        iPad = navigator.userAgent.match(/iPad/i) != null,

        retina = window.devicePixelRatio >= 2 ? true : false,

        icon = (retina) ? (iPad) ? 'icon@144.png' : 'icon@2x.png' : (iPad) ? 'icon@72.png' : 'icon.png',

        category, item, ul, element, ln, i, j;
try
{
// Firefox, Opera 8.0+, Safari
request=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
request=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}

    request.open('GET', url, false);

    request.send(null);

    if (request.status === 200) {

        // preprocess tags out of the response to allow the json to parse correctly

        var text = request.responseText

                .replace("//<feature charts>",'')

                .replace("//</feature>",'');

        

        categories = JSON.parse(text);

        ln = categories.length;

        for (i = 0; i < ln; i++) {

            category = categories[i];

            element = document.createElement('header');

            element.innerHTML = category.title;

            section.appendChild(element);

            ul = document.createElement('ul');

            for (j = 0; j < category.items.length; j++) {

                item = category.items[j];

                element = document.createElement('li');

                element.innerHTML = [

                    '<a href="' + item.url + '">',

                        '<img src="' + item.iconLocation + '/' + icon + '" />',

                        '<h3>' + item.text + '</h3>',

                        '<p>' + item.desc + '</p>',

                    '</a>'

                ].join('');

                ul.appendChild(element);

            }

            section.appendChild(ul);

        }

        document.getElementById('wrapper').style.opacity = 1;

    }

};