JSON is one of the most popular ways of transmitting data between a client and server and is more lightweight than its rival XML.
There are many ways to access data in a JSON schema, but overall the simplest is to use pure JavaScript.
Why not use an abstraction library such as JQuery? For simple tasks like this I don’t see the point of adding yet another dependency to your project when working with pure JavaScript will do the job. On the other hand, for larger projects, using JQuery can end up being a time-saver.
For a functional JQuery/JSON example, check out this related article I have written: Using a JQuery AutoComplete Widget with an ASP.NET Web Service
Explaining the Example
In the example below I’m putting together a global variable that contains JSON format data, as if the HTML document had queried a server for information about a pet shop. I’m doing this to emulate a result since the actual call isn’t relevant to this example.
The premise of the example is for the JSON-format information to includes data about a pet shop, its owner, as well as the dogs and cats that are for sale there.
In the load function of the document I first load the HTML form elements that will output the result of our query. Then the example shows how to grab data from various parts of the JSON variable as a multi-dimensional JavaScript array. Then the example sets the text fields of the form with the relevant data.
As you can see, addressing individual bits of JSON-formatted data using pure JavaScript is quitestraightforward. As long as you are familiar with working with multi-dimensional JavaScript arrays, parsing a JSON document should not present much of a challenge.
If we wanted to make this example more generic, we could use loops and conditional statements in place of pointing at exact nodes.
The Example Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script>
var jsonFormatVar = [
{
petowner:[{
owner:"Bob",
age:"27",
store:"Bob's pet shop",
forsale:[
{
cats:[
{
name:"Mittens",
type:"Tabby"
},
{
name:"Paws",
type:"Siamese"
},
{
name:"Spots",
type:"Caleco"
}
],
dogs:[
{
name:"fido",
type:"poodle"
}
]
}]
}]
}];
function mainFunction(){
var ownerName = document.getElementById("ownerName");
var cat1Name = document.getElementById("firstCatName");
var cat1Type = document.getElementById("firstCatType");
var cat2Name = document.getElementById("secondCatName");
var cat2Type = document.getElementById("secondCatType");
var dog1Name = document.getElementById("firstDogName");
var dog1Type = document.getElementById("firstDogType");
ownerName.value=jsonFormatVar[0].petowner[0].owner;
cat1Name.value=jsonFormatVar[0].petowner[0].forsale[0].cats[1].name;
cat1Type.value=jsonFormatVar[0].petowner[0].forsale[0].cats[1].type;
cat2Name.value=jsonFormatVar[0].petowner[0].forsale[0].cats[2].name;
cat2Type.value=jsonFormatVar[0].petowner[0].forsale[0].cats[2].type;
dog1Name.value=jsonFormatVar[0].petowner[0].forsale[0].dogs[0].name;
dog1Type.value=jsonFormatVar[0].petowner[0].forsale[0].dogs[0].type;
}
</script>
</head>
<body onLoad="mainFunction();">
Owner: <input type="text" id="ownerName"><br>
Cat #2: <input type="text" id="firstCatName"><input type="text" id="firstCatType"><br>
Cat #3: <input type="text" id="secondCatName"><input type="text" id="secondCatType"><br>
Dog #1: <input type="text" id="firstDogName"><input type="text" id="firstDogType"><br>
</body>
</html>
Justin Cooney 
Leave a comment