JSON is an extremely common and powerful way of exchanging data across the Internet. It benefits from being lightweight and easy to parse. This first post shows you the basic principles of working with JSON and a second (later) post will extend this discussion to show how JSON is likely to be encountered in the real world and how we begin to work with it when we do encounter it in the real world.
The name object isn't important (it could be anything – e.g. potato), but var is essential and so too are the curly braces {} and semi-colon.
Next we'll retrieve and write the property to the screen:
Bringing it all together we'd have:
Once again, it doesn't matter what the property is called (in this case "type") or the value ("car"). This pairing is called a key/value pair. The property is the key to the value, and the key is analogous to a word in a dictionary that we look up to find the description (or the "value" of that word).
Or even another object:
Each of these can be inserted and written to the document as before.
You'll notice a few things here. First, we placed object keys and values directly within the curly braces of object.trim and didn't use the dot notation like we did for our main object. Second, the way we accessed the contents of the array and the object is to be noted: in the array we access each item in order, so [0] = "red", [1]="green", [2]="purple", etc., but in an object we use the key to access the value instead when it comes to writing the information to our document.
Take note of the change in punctuation from dot notation to key and value being placed either side of a colon within double quotation marks (but also note that a number would be written without the quotation marks on the value side of the colon).
The littlest JavaScript object
First lets create a JavaScript object in a regular HTML document (saved as always in a regular text editor – not word processor – with a HTML extension).
<!DOCTYPE html>
<html>
<head></head>
<body> <script>var object = {};</script>
</body>
</html>
<html>
<head></head>
<body> <script>var object = {};</script>
</body>
</html>
The name object isn't important (it could be anything – e.g. potato), but var is essential and so too are the curly braces {} and semi-colon.
Adding properties (keys) and values
Now we're going to add a property to the object. Let's for example describe what this object is:
object.type="car";
Next we'll retrieve and write the property to the screen:
document.write(object.type);
Bringing it all together we'd have:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var object = {};
object.type="car";
document.write(object.type);
</script>
</body>
</html>
<html>
<head></head>
<body>
<script>
var object = {};
object.type="car";
document.write(object.type);
</script>
</body>
</html>
Once again, it doesn't matter what the property is called (in this case "type") or the value ("car"). This pairing is called a key/value pair. The property is the key to the value, and the key is analogous to a word in a dictionary that we look up to find the description (or the "value" of that word).
Using arrays and objects as values
The value needn't be a single string (i.e. word or sentence), it could be a number, an array, like so:
object.colours=["red","green", "purple", "white"];
Or even another object:
object.trim={"racer":"leather", "ambler":"suede", "skate":"plastic"};
Each of these can be inserted and written to the document as before.
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var object = {};
object.type="car";
object.colours=["red","green", "purple", "white"];
object.trim={"racer":"leather","ambler":"suede", "skate":"plastic"};
document.write("I'd like a "+object.type+" in "+object.colours[1]+" with "+object.trim['skate']+" trim");
</script>
</body>
</html>
<html>
<head></head>
<body>
<script>
var object = {};
object.type="car";
object.colours=["red","green", "purple", "white"];
object.trim={"racer":"leather","ambler":"suede", "skate":"plastic"};
document.write("I'd like a "+object.type+" in "+object.colours[1]+" with "+object.trim['skate']+" trim");
</script>
</body>
</html>
You'll notice a few things here. First, we placed object keys and values directly within the curly braces of object.trim and didn't use the dot notation like we did for our main object. Second, the way we accessed the contents of the array and the object is to be noted: in the array we access each item in order, so [0] = "red", [1]="green", [2]="purple", etc., but in an object we use the key to access the value instead when it comes to writing the information to our document.
Simplifying the object
So let's finish up this brief (first) post on JSON with removing the dot notation from the creation of our main object, which we called "object", and instead place all keys and values in place from the very beginning.
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>
var object = {
"type":"car",
"colours":["red","green", "purple", "white"],
"trim":{"racer":"leather","ambler":"suede", "skate":"plastic"},
"number":100};
document.write("I'd like a "+object.type+" in "+object.colours[1]+" with "+object.trim['skate']+" trim");
</script>
</body>
</html>
<html>
<head></head>
<body>
<script>
var object = {
"type":"car",
"colours":["red","green", "purple", "white"],
"trim":{"racer":"leather","ambler":"suede", "skate":"plastic"},
"number":100};
document.write("I'd like a "+object.type+" in "+object.colours[1]+" with "+object.trim['skate']+" trim");
</script>
</body>
</html>
Take note of the change in punctuation from dot notation to key and value being placed either side of a colon within double quotation marks (but also note that a number would be written without the quotation marks on the value side of the colon).
Comments
Post a Comment