Difference between revisions of "JSON"

From rbachwiki
Jump to navigation Jump to search
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
==[[ JSON Navigation]]==
== JSON with handlebars ==
''' JSON File '''
''' HTML file '''
<pre>
<pre>
var mainNav = [{
<script id="content" type="text/x-handlebars-template">
            item: "Home",
         {{#each products.items}}
            url: "../index.html"
         <div class="itemBox">
         },
 
         {
            <h2>{{this.heading}}</h2>
             item: "Product Videos",
             <div class="picture">{{{this.image}}}</div>
             url: "../videos/index.php"
             <div class="x">
        },
                <ul>
        {
                    {{#listing}}
            item: "Photo Gallery",
                    <li>
             url: "../photogallery.html"
                        {{this}}
         },
                    </li>
         {
                    {{/listing}}
            item: "Installation Instructions",
                </ul>
            url: "../installation/index.html"
                <button>{{{this.download}}}</button>
        },
             </div>
        {
 
            item: "Catalog Download",
         </div>
             url: "../catalog/index.html"
         {{/each}}
        },
    </script>
        {
 
            item: "Tradeshows",
<div class="mydiv">
            url: "../tradeshow.html"
</pre>
         }
 
''' JavaScript File '''
<pre>
    <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>


    ];
</pre>
</pre>
''' Function That Creates the Navigation and Calls it '''
'''JSON File '''
<pre>
<pre>
  function showMainNav(arr) {
{
         var output = "<ul>";
    "products": {
        var i;
         "items": [{
        for (i = 0; i < arr.length; i++) {
                "heading": "EXTRUDED PROFILES AND SHAPES",
            output += '<a href="' + arr[i].url + '">' + '<li>' + arr[i].item + '</li></a>';
                "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"
                ]
            },


        if (elements.mainNavigation !== null) {
            {
            elements.mainNavigation.innerHTML = output + '</ul>';
                "heading": "EXTRUDED PROFILES AND SHAPES",
        } // end if
                "image": "<img src='master/smimages/a-extruded_profiles.jpg' alt='none' />",
    } // end showMainNav
                "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"
                ]
            }
        ]


     showMainNav(mainNav);
     }
}
</pre>
</pre>
=== Getting JSON Data stored on external sites ===
'''you need to wrap the json data in a function '''
<pre>
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" }
]
});
</pre>
=== Script file ===
<pre>
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;
}
</pre>
=== HTML ===
'''Load the Json file after the script file'''
<pre>
<script src="myscript.js"></script>
<script src="http://iviewsource.com/exercises/json/data.json"></script>
</pre>
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]==

Latest revision as of 18:12, 11 April 2017

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>

Back To Top- Home - Category