Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

What is JSON?

JSON

What is JSON?

by  tsdragon  Posted    (Edited  )
JavaScript Object Notation (JSON) is a way for your server-side programs to return data to your javascript program through an AJAX call in a form that can be easily converted into a javascript object that you can use in your javascript code. I'll give a brief introduction into JSON here. For a more complete discussion, go [link http://www.json.org]here[/link].

The basic format of a javascript object is (those are curly brackets):
{name:value,name:value}

name should be a string, value can be any javascript data type. Just remember that the whole object must be enclosed in curly brackets, that name and value are separated by a colon, and that name/value pairs are separated by commas. I usually put parentheses around the whole thing just to be on the safe side. One of the real tricks in creating a JSON object is to remember that what you are returning is, in fact, javascript code. That means that it must follow javascript syntax (including escaping quotes, newlines, etc. within value strings.

Normally you would use this on the right side of an assignment statement to create a javascript object. The basic idea of using JSON is to return code similar to the above which defines a javascript object, which you would then eval and assign to a javascript variable. After that you can use the "dot" notation to refer to the elements of the object.

For example, if your server-side program returns the following from an AJAX call:
[tt]
( {"firstname":"Tracy","lastname":"Dryden","handle":"tsdragon"} )
[/tt]
Then within your javascript code you would eval the responseText from the AJAX request and assign the result to a variable like this:
[tt]
var user = eval(request.responseText);
[/tt]
Now you have a javascript object named "user" which contains the elements "user.firstname", "user.lastname", and "user.handle".

This is very useful all by itself, but the true power (and complexity) of JSON lies in the fact that you can return an array of objects, and that the "values" themselves can be more than simple strings, they can be any javascript type, including arrays and other obejcts!

So, instead of returning a single record's values to your javascript program, you could return an array of records, like this:
[tt]
( [ {"firstname":"Tracy","lastname":"Dryden","handle":"tsdragon"},
{"firstname":"Steven","lastname":"Dee","handle":"steved"},
{"firstname":"John","lastname":"Smith","handle":"analias"} ] )
[/tt]
When you eval this string and assign the result to the variable "users" you now have an array of record "objects" which you can step thru like this (the assignment statement is broken down to fit the screen):
[tt]
var users = eval(request.responseText);
var str = "";
for ( var recno in users ) {
str += users[recno].handle + " is ":
str += users[recno].firstname + " ";
str += users[recno].lastname + "<br/>";
}
document.getElementById('userlist').innerHTML = str;
[/tt]
Taking this a step further, you can return an object which contain both an array or records and the record count. For example:
[tt]
( {"Records": [
{"firstname":"Tracy","lastname":"Dryden","handle":"tsdragon"},
{"firstname":"Steven","lastname":"Dee","handle":"steved"},
{"firstname":"John","lastname":"Smith","handle":"analias"}
],
"RecordCount":"3" }
)
[/tt]
Your object now has two "properties": an array of records called "Records" and the record count, called "RecordCount". You would use this "recordset object" in your program like this:
[tt]
// create the recordset object
var rs = eval(request.responseText);
// get the record count
var str = rs.RecordCount + " Users:<br/>";
// get the data from the records
for ( var recno = 0 ; recno < rs.RecordCount ; recno++ ) {
str += "&nbsp;&nbsp;&nbsp;";
str += rs.Records[recno].handle + " is ";
str += rs.Records[recno].firstname + " ";
str += rs.Records[recno].lastname + "<br/>";
}
document.getElementById('userlist').innerHTML = str;
[/tt]
In fact, I'll post another FAQ which contains the VBScript code to translate an ADO recordset into JSON in exactly the format shown above, including ecaping certain javascript characters, and converting others to unicode.
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top