LEARN WITH
INTRODUCTION TO JSON
By Jeffry Houser
[Link]
[Link]
[Link]
Copyright © 2017 by DotComIt, LLC
A Quick Introduction to JSON
This article will give you an introduction to JSON. JSON has become the standardized format for data
when building HTML5 applications, it is like a simpler, and smaller, version of XML. A JSON packet is like
a JavaScript object and as an experienced developer, JSON should be easy for you to understand.
A JSON Object with Simple Values
A JSON object consists of a bunch of name value pairs. This is a simple JSON packet:
{
“stringProperty”: “value1”,
“numberproperty”: 1
}
The curly brackets, ‘{‘ and ‘}’ distinguish the start and end of an object. Properties inside the object
consist of the property name, followed by a colon, ending with the value. Property names are enclosed
in double quotes. Properties are put into a comma-separated list.
This JSON object is a single object, which contains two properties: stringProperty and numberProperty.
The value of stringProperty is the string ‘value1’. The string value is enclosed in double quotes. The
value of numberProperty is a number which is not enclosed in quotes. This should parallel your
experience in other languages, where string literals need to be in quotes, but numerical literals do not.
Nested Objects
A JSON packet can also support nested objects. This means that the value of a property is an object.
Here is a sample:
{
“stringProperty”: “value1”,
“numberProperty”: 1,
“objectProperty”: {
“embeddedStringProperty”:”embeddedValue”,
“embeddedNumberProperty”:2
}
}
This new JSON packet expands on the previous one, just adding a new property, objectProperty. The
value of objectProperty is an embedded object with two properties of its own. In essence, the object
contains another object.
The embedded object has an identical syntax to the main object. Curly brackets, ‘{‘ and ‘}’ distinguish
the start and end of an object. Following that is a comma separated list of the embedded object’s
properties. Other objects can be nested for as many layers down as you need.
JSON Arrays
JSON also support arrays. Here is a packet that includes an array of numbers:
[10,9,8,7,6,5,4,3,2,1]
Arrays are defined with square brackets instead of curly brackets that represent objects. Here is an
array of Strings:
[“ten”,”nine”,”eight”,”seven”,”six”,”five”,”four”,”three”,”two”,”one”]
Values in arrays do not have a name, they only have a location index. The location index is determined
by the location of the item in the array, not by a specific name like an object property.
Arrays do not have to contain simple values, they can also include objects:
[
{
“stringProperty”: “value1”,
“numberProperty”: 1,
},
{
“stringProperty”: “value2”,
“numberProperty”: 3,
}
]
This array contains two separate objects, each with an identical structure. This approach is common
when building applications. Each array item contains an object with a stringProperty and
numberProperty.
Putting it All Together
Arrays, Objects, and simple values can be used together to create complex data structures:
[
{
“stringProperty”: “value1”,
“numberProperty”: 1,
“objectProperty”: {
“embeddedStringProperty”:”embeddedValue”,
“embeddedNumberProperty”:2
},
“arrayProperty”: [1,2,3,4,5,6,7,8,9,10]
},
{
“stringProperty”: “value2”,
“numberProperty”: 3,
“objectProperty”: {
“embeddedStringProperty”:”embeddedValue2”,
“embeddedNumberProperty”:4
},
“arrayProperty”: [10,9,8,7,6,5,4,3,2,1]
}
]
The elements of the array are objects. Each object contains a stringProperty, numberProperty,
objectProperty, and arrayProperty. This sample includes an array, with each element of an object.
Each object contains two simple properties and two complex properties.
This is the first time we used a nested array, but the definition of the array is identical to a non-nested
array.
Final Thoughts
JSON has become the de facto standard for passing data between a server and an HTML 5 application.
JSON packets offer a smaller packet size than you’ll get with alternatives such as XML. It is now natively
supported by most programming languages and is great, extensible way to share your data.
Be sure to check out our books that will teach you how to build apps with AngularJS or Angular 4.