Introduction to JSON and Array in JavaScript


JSON is a rapid growing data transmission format on web and to support it array and objects of javascript are responsible, we describe array and JSON along with their values and possible use in real life web application.

Array in JavaScript

Array in JavaScript are special well you may think how, but believe me once you know about Arrays in JavaScript and their similarities and differences with the Objects in JavaScript, plus if you learn to use them together as JSON, they will help you so much in coming future. I am not sure if they will replace XML as transmission format but yes they are in tight competition.

Arrays in JavaScript does not comes under typical definition of Arrays(Collection on homogeneous data types). No, this data structure can hold variety of data type inside, and yet we call it Array. For example in following code snippet we show the declaration of an Array.


var array = [1,'b',"cde",1.234];

The code snippet above shows a collection of four kind of data values stored in one variable, which we of course know as an array. So this sample shows that the data type is no boundation on an array in JavaScript, and if you have read our previous tutorial about Objects you may notice the slight similarity of the syntax.


var array = []; //declaration of array
var obj = {}; //declaration of objects

However there are so many differences, both types are widely separated. As one of them is that you can't have key-value mapping inside the array, on the contrary we have a very simple solution to the problem as our next code snippet shows. You can store the object as an element of array.


var array = [1,'b',"cde",1.234,{key:"value"}];

There is another way to declare an array but it is less popular and rarely used, we show this in our next code snippet along with the demonstration of accessing the elements of array along with some of the utility functions provided with arrays.


var ary = new Array(1,2,3,4); //using array constructor to declare array

var ary2 = [1,'b',1.2."hello",{key:"value"}];

console.log(ary2.length); //output 5 the number of elements in array

console.log(ary2[3]); //hello - accesses the 4th element in array

console.log(ary2[4].key); //value - access the 4th element, which is an object thus invoke its property using dot-notation

Thus here we see how we can create Array using the constructor, but as we already said we don't follow this notation usually. Rest of the code shows the way we can access the elements of an array. This is to be noted that just like in any other language JavaScript also starts indexing of array from 0(zero) instead of one, and in the last line we accessed the value of the Object property which we use using shorthand notation, that is using "[].".

Now that we have mentioned both Arrays and Object at the same place, we will not leave the story of JSON untold.

Introduction to JSON

JSON is a abbreviated form of JavaScript Object Notation. This was originally formed or views as nothing more than arrays of Object but soon a power was unleashed. JSON is now days competing XML in data transmission, and most of the big service providers like RS and AJAX use JSON now instead of XML, however one shall not think XML is outdated. It is still in use but not as much as JSON is.


var jsonSample = [
	{name:'ExamsMyantra',type:'website'},
	{name:'google',type:'search engine'},
	{name:'facebook',type:'social network'}
];

This is a generic form of JSON object, although in this form this may look like nothing more than a bulky object array but consider a situation where you want a mobile application to display a whole list of customers using that application, thus you won't have another choice than to hit a web service, which will either send you data in form of XML or JSON, which probably you would want in JSON form because its lighter than XML and its already in the form which your phone's browser or application use, as most of mobile devices support JavaScript to their default behavior.

Thus this is a good point, even if you get the data in the form of String you can use the JavaScript provided method which can parse your JSON like string into actual JSON objects,


JSON.parse();

This will accept the json string and will return the object form of JSON thus making it ready to use, to know more about how you can work with JSON on server side, this article demonstrate how you play with JSON in PHP, which is very well known server side language.