The jQuery JSON Introductory Examples should help you get started with using javascript objects to retrieve and store data.

JSON (or json) is an acronym for Javascript Object Notation. JSON is used to store data. The syntax is a keyname:value syntax. What this means is that each pair within a json object has a keyname and a value associated to the name. For example {firstName:’Daniel’}. The key is firstName and the value is ‘Daniel‘. The keyname is not surrounded by quotes. The value is surrounded by quotes if it is a string value. A json object can contain many keyname:value pairs. For example {firstName:’Daniel’,lastName:’Defoe’}. Each key:value pair is separated by a comma. Now lets add some more key:value pairs for this example. {firstName:’Daniel’,lastName:’Defoe’,occupation:’author’,birth:1660,death:1731,famous:true}. The birth and death values are not surrounded by quotes as they are a number value. The value for the keyname famous is not surrounded by quotes as it is a ‘boolean‘ value (true). The json syntax can become difficult to read as more key name:value pairs are added. To make things easier to read lets take the above json object and organise it better.

The jQuery language is ideal for manipulating json objects. Lets do something with the above json object. We will use a variable of ‘person’ to store the json object.

See the Pen jQueryJSONIntroductoryExamples1 by Daniel (@Parsons) on CodePen.

JSON is very easy to work with. Say we want to add more people into mix to create a collection of people. This is done by using an array of JSON objects. For example lets say another author is added. This is the JSON object:

Now we add this JSON object with the previous JSON object into an array ‘[]’. The variable person now becomes an array of JSON objects and details from each member in the array is called by using the index number from the array.

See the Pen jQueryJSONIntroductoryExamples2 by Daniel (@Parsons) on CodePen.

Lets deconstruct this to gain a better understanding.
First of all we have an empty array with the variable name of ‘person’.

Next we have two empty json objects with 6 keynames.

Now we add values to the json objects.

And finally we add the two json objects to the person array.

And now we can look call values with some jQuery.

See the Pen jQueryJSONIntroductoryExamples3 by Daniel (@Parsons) on CodePen.

And why not add another person object to the person array. Lets say ‘Captain Cook’. First we create the ‘Captain Cook’ person json object.

Then we add the ‘Captain Cook’ json object to the person array.

See the Pen jQueryJSONIntroductoryExamples4 by Daniel (@Parsons) on CodePen.


More on jQuery

jQuery JSON Introductory Examples.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

Your email address will not be published. Required fields are marked *