Difference between revisions of "JSON"

From rbachwiki
Jump to navigation Jump to search
 
(One intermediate revision 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">
        },
         {
            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"
        }


     ];
            <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">
</pre>
</pre>
''' Function That Creates the Navigation and Calls it '''
 
''' JavaScript File '''
<pre>
<pre>
  function showMainNav(arr) {
    <script type="text/javascript">
        var output = "<ul>";
            $(function() {
        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) {
                $.getJSON('products.json', function(info) {
            elements.mainNavigation.innerHTML = output + '</ul>';
 
        } // end if
                    var source = $('#content').html();
    } // end showMainNav
                    var template = Handlebars.compile(source);
                    var compiledHtml = template(info);
                    $('.mydiv').replaceWith(compiledHtml);
                    console.log(info);
 
                });
 
            });
        </script>


    showMainNav(mainNav);
</pre>
</pre>
'''JSON File '''
<pre>
{
    "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"
                ]
            },


=== Using For In Loop ===
            {
The for in loop does not always display the array in the order typed
                "heading": "EXTRUDED PROFILES AND SHAPES",
'''HTML '''
                "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"
                ]
            }
        ]
 
    }
}
</pre>
=== Getting JSON Data stored on external sites ===
'''you need to wrap the json data in a function '''
<pre>
<pre>
  <h2>My List</h2>
dataHandler({
  <ul id="links">
"full_name" : "Ray Villalobos",
  </ul>
"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>
</pre>
=== Script file ===
<pre>
<pre>
<script>
function dataHandler(info) {
        var info = {
var output='';
            "full_name": "Ray Villalobos",
for (var i = 0; i <= info.links.length-1; i++) {
            "title": "Staff Author",
for (key in info.links[i]) {
            "links": {
if (info.links[i].hasOwnProperty(key)) {
                "blog": "http://iviewsource.com",
output += '<li>' +
                "facebook": "http://facebook.com/iviewsource",
'<a href = "' + info.links[i][key] +
                "youtube": "http://www.youtube.com/planetoftheweb",
'">' + key + '</a>';
                "podcast": "http://feeds.feedburner.com/authoredcontent",
'</li>';
                "twitter": "http://twitter.com/planetoftheweb"
    } 
            }
}
        };
}
 
var update = document.getElementById('links');
update.innerHTML = output;


        var output = "";
}
        for (key in info.links) {
</pre>
            // if the link has the key property
=== HTML ===  
            if (info.links.hasOwnProperty(key)) {
'''Load the Json file after the script file'''
                output += '<li>' + '<a href="' + info.links[key] +
<pre>
                    '">' + key + '</a>' + '</li>';
<script src="myscript.js"></script>
            }
<script src="http://iviewsource.com/exercises/json/data.json"></script>
        }
        var update = document.getElementById('links');
        update.innerHTML = output;
    </script>
</pre>
</pre>


==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]==
==[[#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