JSON

JSON Navigation

JSON File

var mainNav = [{
            item: "Home",
            url: "../index.html"
        },
        {
            item: "Product Videos",
            url: "../videos/index.php"
        },
        {
            item: "Photo Gallery",
            url: "../photogallery.html"
        },
        {
            item: "Installation Instructions",
            url: "../installation/index.html"
        },
        {
            item: "Catalog Download",
            url: "../catalog/index.html"
        },
        {
            item: "Tradeshows",
            url: "../tradeshow.html"
        }

    ];

Function That Creates the Navigation and Calls it

  function showMainNav(arr) {
        var output = "<ul>";
        var i;
        for (i = 0; i < arr.length; i++) {
            output += '<a href="' + arr[i].url + '">' + '<li>' + arr[i].item + '</li></a>';
        }

        if (elements.mainNavigation !== null) {
            elements.mainNavigation.innerHTML = output + '</ul>';
        } // end if
    } // end showMainNav

    showMainNav(mainNav);

Using For In Loop

The for in loop does not always display the array in the order typed HTML

 <h2>My List</h2>
 <ul id="links">
 </ul>

<script>
        var info = {
            "full_name": "Ray Villalobos",
            "title": "Staff Author",
            "links": {
                "blog": "http://iviewsource.com",
                "facebook": "http://facebook.com/iviewsource",
                "youtube": "http://www.youtube.com/planetoftheweb",
                "podcast": "http://feeds.feedburner.com/authoredcontent",
                "twitter": "http://twitter.com/planetoftheweb"
            }
        };

        var output = "";
        for (key in info.links) {
            // if the link has the key property
            if (info.links.hasOwnProperty(key)) {
                output += '<li>' + '<a href="' + info.links[key] +
                    '">' + key + '</a>' + '</li>';
            }
        }
        var update = document.getElementById('links');
        update.innerHTML = output;
    </script>

Getting JSON Data stored on external sites

you need to wrap the json data in a function

dataHandler({
	"full_name" : "Ray Villalobos",
	"title" : "Staff Author",
	"links" : [
			{ "blog"     : "http://iviewsource.com" },
			{ "facebook" : "http://facebook.com/iviewsource" },
			{ "podcast"  : "http://feeds.feedburner.com/authoredcontent" },
			{ "twitter"  : "http://twitter.com/planetoftheweb" },
			{ "youtube"  : "http://www.youtube.com/planetoftheweb" }
		]
});

Script file

function dataHandler(info) {
	var output='';
	for (var i = 0; i <= info.links.length-1; i++) {
		for (key in info.links[i]) {
			if (info.links[i].hasOwnProperty(key)) {
				output += '<li>' + 
				'<a href = "' + info.links[i][key] +
				'">' + key + '</a>';
				'</li>';
	    }   
		}
	}

	var update = document.getElementById('links');
	update.innerHTML = output;

}

HTML

Load the Json file after the script file

<script src="myscript.js"></script>
<script src="http://iviewsource.com/exercises/json/data.json"></script>