jQuery - Generate hyperlinks dynamically from JSON file

Use Case:
While creating some static Web Pages, realize that managing bunch of hyperlinks separately in each page would be an tedious and error prone task. So decided to store link content in a file and refer that file to generate hyperlinks dynamically in each page. This way I would be able to modify links at any time without modifying HTML pages referring these links.

Approach:
There can be many ways of achieving this objective, but here I am using jQuery (a JavaScript Library) and JSON format( JavaScript Object Notation - a lightweight data-interchange format).

About jQuery: jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

About JSON:JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.

Sample JSON Object Array:(here for example links.json in Content folder)

[{
    "fileName":"file1.html",
    "linkText":"File1 Link Text"
},
{
    "fileName":"file2.html",
    "linkText":"File2 Link Text"
},
{
    "fileName":"file3.html",
    "linkText":"File3 Link Text"
}]

Basic syntax for jQuery is: $(selector).action()
     1. A $ sign to define/access jQuery
     2. A (selector) to "query (or find)" HTML elements
     3. A jQuery action() to be performed on the element(s)

jQuery functions we will be using are:
getJSON() function which reads content from a file and pass JSON array to a function.
each() function will take two inputs, 1. Object array to iterate over and 2. callback function to be executed on each Object.
html(htmlString) function sets htmlString as content of each matched element.

<script>
function Urlify(Val) {
	return "http://www.mylearnings.net/topics/" + Val ;
}

$(function(){
    $.getJSON('Content/links.json', function (data) {
        var htmlBuilder=[];
		$.each(data, function (i, dataPoint) {
			htmlBuilder += '<li><a href=\"'+ Urlify( dataPoint.fileName) +'\">' + dataPoint.linkText+'</a></li>/';
		}); //each
		$('#dynamicList').html(htmlBuilder);
	});
});
</script>

In Above code, $(function() {}); is shorthand for $( document ).ready(function() {});, Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Note that as per above syntax here document is our selector, so action ready() will be triggered on document.
Once DOM is ready, getJSON function will be called, here we don't have any selector to specify and thus $.getJSON() is used.
Now getJSON function takes two arguments, 1. url for JSON and 2. success call back function. Here server is requested for JSON file using url and on success, success callback function called with return data, which is typically a JavaScript Object or Array defined by JSON structure.
After successful retrieval of JavaScript Object Array, each() method is called, which is having argument JavaScript Object Array and callback function to be executed over each array object.
In this callback function we are accessing fields of object (e.g dataPoint.fileName) and constructing an htmlString of <li> tags containing linkText. Once htmlString is ready, html() function called over selector #dynamicList (an element with id attribute as 'dynamicList'). and content of this element(with id 'dynamicList') will be set to htmlString.

Note: for above code to work you must have jQuery library added to your html page as <script src="js/jquery.min.js"></script>