Page 1 of 1

Javascript JSON basics 1 Rate Topic: -----

#1 BetaWar  Icon User is online

  • #include "soul.h"
  • member icon

Reputation: 1148
  • View blog
  • Posts: 7,145
  • Joined: 07-September 06

Posted 05 September 2008 - 06:56 PM

JSON is a strong and easy way of sending and storying Javascript data in a native Javascript format. Unlinke XML, JSON doesn't need to have any special parser for it to work, you just need Javascript (hereafter JS) and a little knowledge to use it.

NOTE - This tutorial does require knowledge of objects and arrays in Javascript for greatest understanding.

Why use JSON?
JSON is a good way of passing and saving data in JS, as it is native to JS in a way that XML isn't. While XML uses many tags that have all been placed within each other to make an easily readable tree of data it also needs special calls to be able to read. JSON on the other hand needs no such calls so it is easier to get working with a JS app.

The basic basics - because we must start somewhere

JSON is composed of objects, variables, literal values, and arrays which create a data structure that can be read without any super special calls in JS.

Lets look at a very simple JSON data tree:
{"messages":[
	{
	  "id": "17"
	}
  ]
};


While this may not be the most useful (considering the amount of data that is stored in it) it does work well with what we are trying to make clear. When looking at the same data in XML it comes out to this:

<?xml version="1.0"?>
<root>
  <messages>
	<0>
	  <id>17</id>
	</0>
  </messages>
</root>


which looks far more cluttered mostly because it is. With XML you have to create an opening and closing tag for each element or it won't work right.

Both of these creates an object called messages that has an array of messages inside of it (starting with 0) which contains a variable called id set to the value of 17.

Looking at using JSON
Now that you have decided to give JSON a little more of a chance we will look at how to use it in a simple application.

To start off we will expand our previous example to have multipel entries with more than a single variable. Additionally we will be setting it to a variable so that we can easily use it in our script:
var obj = {
  "messages":[
	{
	  "id": "17",
	  "user": "Ryan Smith",
	  "text": "This is an example of JSON",
	  "time": "04:41"
	},
	{
	  "id": "18",
	  "user": "Ryan Smith",
	  "text": "Here is another Element",
	  "time": "04:41"
	}
  ]
};


Now we have initialized the variable obj to our data.

Reading the data is just as simple, and can be accomplished through this script:
for(var i=0; i<obj.messages.length; i++){
  var t = obj.messages[i];
  document.write("ID: "+t.id+" User: "+t.user+" @ "+t.time+"<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+t.text+"<br />");
}


All this loop does is go through the entire length of the entries of our data and outputs them in a simple format stating the id, user, time and their message.

Which outputs this:
ID: 17 User: Joe @ 04:41
		Simple message
ID: 18 User: Bobby @ 04:41
		Here is another


Taking a look at the full script (ready to run) , it looks like so:
<script>
var obj = {
  "messages":[
	{
	  "id": "17",
	  "user": "Joe",
	  "text": "Simple message",
	  "time": "04:41"
	},
	{
	  "id": "18",
	  "user": "Bobby",
	  "text": "Here is another",
	  "time": "04:41"
	}
  ]
};

for(var i=0; i<obj.messages.length; i++){
  var t = obj.messages[i];
  document.write("ID: "+t.id+" User: "+t.user+" @ "+t.time+"<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+t.text+"<br />");
}
</script>


Can JSON be made harder to read?
Well yes, you can do a number of things to your JSON data to make it harder to read or understand. For instance one of the most simple ways (which won't be able to fool a seasoned programmer) is to take out all of the extra whitespaces, which makes the data look like so:

{"messages":[{"id":"17","user":"Joe","text":"Simple message","time":"04:41"},{"id":"18","user":"Bobby","text":"Here is another","time":"04:41"}]};


However it is still best to do an actual obfuscation on the data if you are paranoid about people reading it.

Using JSON with server side lanugages
JSON offers easy communication with various languages through plugins you can download from JSON.org

There is one key thing to remember when communicating with the server and having it output JSON code, or taking JSON from other websites. It may have some source code that you don't want run in it! You must be careful not to allow things to be run for fear of losing some of your visitors when they think your site has been hacked. JSON.org has some scripts that can help you to make sure that people aren't sneaking additional content into your JSON feeds.

One other thing to remember when taking output from a server through Ajax is that you will have to evaluate the responseText, like so:

eval('(' + req.responseText + ')');


And then set that to a variable so you can use it. This is because it was not interpreted with the rest of the JS when the page was loaded.

Enjoy and have fun learning

Is This A Good Question/Topic? 0
  • +

Page 1 of 1