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

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>