JSON

JSON with handlebars

HTML file

 <script id="content" type="text/x-handlebars-template">
        {{#each products.items}}
        <div class="itemBox">

            <h2>{{this.heading}}</h2>
            <div class="picture">{{{this.image}}}</div>
            <div class="x">
                <ul>
                    {{#listing}}
                    <li>
                        {{this}}
                    </li>
                    {{/listing}}
                </ul>
                <button>{{{this.download}}}</button>
            </div>

        </div>
        {{/each}}
    </script>

<div class="mydiv">

JavaScript File

    <script type="text/javascript">
            $(function() {

                $.getJSON('products.json', function(info) {

                    var source = $('#content').html();
                    var template = Handlebars.compile(source);
                    var compiledHtml = template(info);
                    $('.mydiv').replaceWith(compiledHtml);
                    console.log(info);

                });

            });
        </script>

JSON File

{
    "products": {
        "items": [{
                "heading": "EXTRUDED PROFILES AND SHAPES",
                "image": "<img src='master/smimages/a-extruded_profiles.jpg' alt='none' />",
                "download": "<a href='master/A-Section.pdf' target='_blank'> <button>Download Section</button></a>",
                "listing": [
                    "Angle Mouldings",
                    "Baseboard Mouldings",
                    "Bumper Mouldings",
                    "Cap and Divider Mouldings",
                    "Carpet Mouldings",
                    "Decorative Trim Mouldings",
                    "Door Track Mouldings",
                    "Edgebanding",
                    "U-Channel Mouldings"
                ]
            },

            {
                "heading": "EXTRUDED PROFILES AND SHAPES",
                "image": "<img src='master/smimages/a-extruded_profiles.jpg' alt='none' />",
                "download": "<a href='master/A-Section.pdf' target='_blank'> <button>Download Section</button></a>",
                "listing": [
                    "Angle Mouldings",
                    "Baseboard Mouldings",
                    "Bumper Mouldings",
                    "Cap and Divider Mouldings",
                    "Carpet Mouldings",
                    "Decorative Trim Mouldings",
                    "Door Track Mouldings",
                    "Edgebanding",
                    "U-Channel Mouldings"
                ]
            }
        ]

    }
}

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>