This seemed to take a disproportionate amount of digging to find. So for future reference here is a neat Javascript number formatting function that adds commas to large numbers. Was found at http://www.mredkj.com/javascript/nfbasic.html

		function addCommas(nStr)
		{
			nStr += '';
			x = nStr.split('.');
			x1 = x[0];
			x2 = x.length > 1 ? '.' + x[1] : '';
			var rgx = /(\d+)(\d{3})/;
			while (rgx.test(x1)) {
				x1 = x1.replace(rgx, '$1' + ',' + '$2');
			}
			return x1 + x2;
		}

What is JSON?

JSON is Javascript Object Notation is a lightweight way to store and move data. If you are familiar with XML think of JSON as been … fitter, happier, more productive.

So what is a Javascript object. Javascript objects consist of name : value pairs. They are defined within curly bracket as follows:

{"Author" : "Dickens"}

To list multiple name : values pairs separate them with commas as follows:

{
  "Title1": "The Adventures of Oliver Twist",
  "Title2": "The Life and Adventures of Nicholas Nickleby",
  "Title3": "The Old Curiosity Shop",
  "Title4": "A Christmas Carol",
  "Title5": "David Copperfield",
  "Title6": "Bleak House",
  "Title7": "A Tale of Two Cities",
  "Title8": "Great Expectations"
}

Hold on I thought you said JSON was fitter, happier, more productive. That looks repetitive and verbose. True and that is why we can also write JSON using arrays. Arrays are defined by square brackets.

{"name" : ["array value 1", "array value2"]}

So the above could also be represented as:

{ "title": [
"The Adventures of Oliver Twist",
"The Life and Adventures of Nicholas Nickleby",
"The Old Curiosity Shop",
"A Christmas Carol",
"David Copperfield",
"Bleak House",
"A Tale of Two Cities",
"Great Expectations"
]
}

Tip: Notice how the above can be spread of multiple lines. JSON is stickler for the syntax of curly brackets, square brackets and commas but inside an array you can format this to be more readable with lines breaks.

We see this later but what you will commonly be doing with JSON is using data provided by a third party such as Facebook or Twitter.

jQuery and JSON

We are going to use jQuery to drab some data from JSON and add it to the HTML of a document. jQuery has a function called $.getJSON. This may look a little odd compared to other jQuery you have seen like toggle():

$(".moreless").toggle(showPanel,hidePanel);

Here the toggle() method is attached to an object in the HTML DOM, in this case objects of class “moreless”. With $.getJSON it is not attached to a specific element in the DOM – it would be illogical to do so. Instead $.getJSON is a global function / method available whenever it is needed.

The $.getJSON method takes as its first argument the URL of the JSON file to load. As a second argument it takes a callback function – that is a function that will be called when the data is retrieved. Most commonly you would use an anonymous / inline function but named functions can be used as well. For an explanation of the difference between anonymous and named functions see the posted called “Anonymous / Inline vs Named Functions in Javascript”.

Assuming we have a JSON file called ‘dickens-books.json’ in the same directory as the HTML file we wish to use the data in, then using an anonymous function, we would write:

$(document).ready(function() {
	 $.getJSON('dickens-books.json', function(data) {
     // to something
    });
});

We now have the data so lets do something with it. The data is a Javascript Object so we could use jQuery’s each() method to loop around it.

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
	$.getJSON('dickens.json', function(data) {
	  var items = [];

	  $.each(data, function(key, val) {
		items.push('<li id="' + key + '">' + val + '</li>');
	  });

	  $("#myData").html(items.join("\n"));

	});
});
</script>

Here once the data is loaded we create an empty array called ‘items’. We then use $.each() to populate that array with the keys and values from the JSON data.

For more examples of each() see the post “each() To Their Own – jQuery each() Explained”.

For presentation the jQuery html() method takes the array as a string. The string is created using Javascript’s join() method. You can read more about join() in the post “Manipulating Javascript Arrays with Split and Join.

Take a look at the demo.

There are two flavours of each(). It can be used as selector to grab ‘each’ instance of a selector or it can be used to loop around objects like arrays.

Usage 1: Looping Elements in the HTML

We can use each() as a Selector. Assume we have a simple list:

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

Then with each() we can ask jQuery to look for all the <li> elements. Now you could of course just do that with $(“li”) but each allows you to keep a count of where you are.

 $("li").each(function(i){
	$(this).append("- " + i);
});

The above targets each <li> and appends a dash and an iteration value. The resultant output is:

<ul>
<li>Item- 0</li>
<li>Item- 1</li>
<li>Item- 2</li>
</ul>

Usage 2: Arrays

Here we will use the ‘global’ version of each(). Instead of reference a jQuery object first we call each() as $.each() (like $.getJSON). The global version of each takes an object such as an array as its first parameter and then a callback function as its second. The callback function is often an anonymous / inline function for code brevity. So assume we have an array as follows:

var dickensBooks=new Array(
	"The Adventures of Oliver Twist",
	"The Life and Adventures of Nicholas Nickleby",
	"The Old Curiosity Shop",
	"A Christmas Carol",
	"David Copperfield",
	"Bleak House",
	"A Tale of Two Cities",
	"Great Expectations");

We could loop around this with $.each() as follows:

	$.each(dickensBooks, function(i, val){

		console.log("Index: " + i);
		console.log("Value: " + val);

	});

What the Dickens? The $.each() first parameter is the array. Then we have the callback function placed anonymously / inline. It takes two parameter I have called ‘i’ and ‘val’. The ‘i’ parameter will be equal to the index of our array – starting at zero. The ‘val’ parameter will be the value in that slot of the array.

We can also use Javascript objects here – Javascript Object having there name : value notation. Here is a Javascript Object:

	var dickensNovels = new Object();
	dickensNovels.title = "The Adventures of Oliver Twist";
	dickensNovels.published = 1837;
	dickensNovels.leadCharacter = "Oliver Twist";
	dickensNovels.film = "David Lean, 1948";
	dickensNovels.musical = "London, 1960"

A Javascript Object is basically an associate array. Therefore we can feed this to the $.each() lion as follows:

	$.each(dickensNovels, function(name, val){

		console.log("Name: " + name);
		console.log("Value: " + val);

	});

Please Sir, I want some more (explanation). We feed the ‘dickensNovel’ object into $.each() as its first parameter. Next along comes the inline function that takes two parameter that I have chosen to call ‘name’ and ‘value’ (call them what you will Sir). We can then loop away and extract all the goodies.

Take a look at the demo.

This particular usage of each() is often used in conjunction with data retrieved via JSON.

With the likes of jQuery you often have the need to create callback functions. These can be anonymous / inline or named functions. Here is quick post to show the syntax differences between the two.

Anonymous

Here is an anonymous or if you prefer inline function. The function isn’t named and we get straight into the action.

$(".anon").click(function(){
	alert('I have no name!');
});

Named

Here a function is named. I called it ‘doSomethingPointless’.

$(".named").click(doSomethingPointless);

function doSomethingPointless(){
	alert('I know who I am!');
}

You can view a demo of this here.

Callbacks with Data

If you are using a piece of jQuery like $.getJSON method then your callback will have a data parameter. This can be handled anonymously or named as well. Anonymously you would do:

    $.getJSON('dickens-books.json', function(data) {
     // to something
    });

… or if you prefer not to be anonymous then:

$(document).ready(function() {
       $.getJSON('dickens-books.json', sortData);

       function sortData(data){
       // to something
      }

  });
});

Should I Split or Should I Join Now or Should I Array I Should I Go Now.

Oh dear. Shoehorning the Clash to a Javascript tutorial – phew rock ‘n’ roll.

Arrays are a neat way of moving and manipulating data. To create an array in Javascript the syntax is as follows:

var clashAlbums=new Array();
clashAlbums[0]="The Clash";
clashAlbums[1]="Give 'em Enough Rope";
clashAlbums[2]="London Calling";
clashAlbums[3]="Sandinista!";
clashAlbums[4]="Combat Rock";

Or if you prefer:

var clashAlbums=new Array("The Clash","Give 'em Enough Rope","London Calling","Sandinista!","Combat Rock");

We could reference one element of the array as follows:

clashAlbums[2];
/* would output "London Calling" */

If you a are PHP developer you’ll probably be aware of the array functions implode() and explode(). In PHP implode() turns an array into a string and explode() turns a string into an array. In Javascript join() turns an array into a string and split() turns a string into an array. Lets see these chaps in action.

The join() method of an array takes one parameter – the character you wish to use as a separator in your string. For example the following would create a comma separated list.

clashAlbums.join(",");

If we were wanting to have each item appear in HTML on a new line you could therefore use:

clashAlbums.join("<br>");

The above is not the full story as we would need to output these values. You could do that with document.write() in Javascript as follow:

document.write(clashAlbums.join("<br>"));

Alternatively you could output using jQuery by attaching the output to an element with the jQuery html() method as follows:

$("#clashlps").html(clashAlbums.join("<br>"));

You’ll find demos of both outputs here.

So that leaves split(). Split does the reverse of join() – it creates an array from a string. Take the following:

var clashAlbumsString = "The Clash,Give 'em Enough Rope,London Calling,Sandinista!,Combat Rock";

We have a string and we can use split() to convert it into an array. All we need is a suitable separator. In this example the string has been set up with commas as separators. So to convert the above string to an array we use:

var clashAlbums = clashAlbumsString.split(",");

… where ‘clashAlbums’ is the name of our array.

You’ll find a split demo here.

It has to be said in my experience join() is the more useful of the two, but it is good to know you can have two way traffic. One job where join() helps an awful lot is when you have to manipulate data that you get sent from your best mate Jason … sorry JSON.