JSON basics

learn more at:

[Link]

© Louis D. Nel 2017 COMP 3005 JSON basics 1

 JSON

JSON = Javascript Object Notation

It is a string representation of javascript data objects.

Data objects because JSON does not allow functions,

or Dates for example.

Node, and Browsers, provide a JSON global function

that can turn a javascript object into a JSON string:

var jsonString = [Link](obj)

and a parser to turn a JSON string back into an object:

var obj = [Link](jsonString)

© Louis D. Nel 2017 COMP 3005 JSON basics 2

 JSON

Observations:

There is no such thing as a JSON object per se. JSON

is a string representation of objects. (Though people
often talk about passing JSON objects around).

JSON is easy to move or store because it is just text

and easy to parse with javascript's built in JSON
function object.

© Louis D. Nel 2017 COMP 3005 JSON basics 3

 Javascript Object vs. JSON
let obj = {
name: 'Lou',
date: new Date(),
getName: function() {return [Link]}
}

let jsonString = [Link](obj);

'{"name":"Lou","date":"2015-08-07T22:49:09.047Z"}'

let obj2 = [Link](jsonString);

{ name: 'Lou', date: '2015-08-07T22:49:09.047Z' }

Observations:
When you [Link]() an object, functions are ignored, dates are turned into strings.
Also, JSON strings only allow double quotes for keys, not single or double quotes the way javascript
allows. (The single quote is used to delimit the overall string.)

© Louis D. Nel 2017 COMP 3005 JSON basics 4

 JSON stringify() and parse() session

JSON experiment.

Observations:
When you [Link]() and object. Functions are ignored, dates are turned into strings.
Also, JSON strings only allow double quotes for key names (not single quotes).

© Louis D. Nel 2017 COMP 3005 JSON basics 5

 Data Interchange Schemes

Three data interchange formats are the most popular

with web apps:
• XML (Extendable Markup Language)
• JSON (Javascript Object Notation)
• URI Encoded Data

• All three are popular for data interchange

(transmitting data through a network).

• XML and JSON both also popular as configuration

data.

© Louis D. Nel 2017 COMP 3005 JSON basics 6

 URI Encoded Data

var uri = "my [Link]?name=ståle&car=saab"

[Link](encodeURI(uri))
my%[Link]?name=st%C3%A5le&car=saab
[Link](encodeURIComponent(uri))
my%[Link]%3Fname%3Dst%C3%A5le%26car%3Dsaab

var enc = "my%[Link]?name=st%C3%A5le&car=saab"

[Link](decodeURI(enc))
my [Link]?name=ståle&car=saab
enc =
"my%[Link]%3Fname%3Dst%C3%A5le%26car%3Dsaab”
[Link](decodeURIComponent(enc))
my [Link]?name=ståle&car=saab
© Louis D. Nel 2017 COMP 3005 JSON basics 7
 XML vs JSON
{
<?xml version="1.0" encoding="UTF-8"?>
"title": "26-2",
<song>
"composer": "John Coltrane",
<title> 26-2 </title>
"musicalStyle": "Medium Up Swing",
<composer> John Coltrane </composer>
"key": "F",
<musicalStyle> Medium Up Swing
</musicalStyle> "bars": [
<key> F </key> {
<bar> "timeSignature": "4/4",
<timeSignature> 4/4 </timeSignature> "rehearsalLetter": "A",
<rehearsalLetter> A </rehearsalLetter> "leftDoubleBarLine": "true",
<leftDoubleBarLine/> "chords": "Fmaj7 / Ab7",
<chords> Fmaj7 / Ab7 </chords> },
</bar> {
<bar> "chords": "Dbmaj7 / E7",
<chords> Dbmaj7 / E7 </chords> },
</bar> {
<bar> "chords": "Amaj7 / C7",
<chords> Amaj7 / C7 </chords> },
</bar> {
<bar> "chords": "Cm7 / F7",
<chords> Cm7 / F7 </chords> },
</bar> {
<bar> "finalBarLine": "true",
<finalBarLine/> "chords": "Fmaj7",
<chords> Fmaj7 </chords> }
</bar> ]
</song> }

© Louis D. Nel 2017 COMP 3005 JSON basics 8

 XML vs JSON
<?xml version="1.0" encoding="UTF-8"?>
{ How do we know this is
song>
"title": "26-2", a song?
<title> 26-2 </title>
"composer": "John Coltrane",
<composer> John Coltrane </composer>
"musicalStyle": "Medium Up Swing",
<musicalStyle> Medium Up Swing
</musicalStyle> "key": "F",
<key> F </key> "bars": [
<bar> {
<timeSignature> 4/4 </timeSignature> "timeSignature": "4/4",
<rehearsalLetter> A </rehearsalLetter> "rehearsalLetter": "A",
<leftDoubleBarLine/> "leftDoubleBarLine": "true",
"chords": "Fmaj7 / Ab7", How do we know this is
<chords> Fmaj7 / Ab7 </chords> a bar?
</bar> },
<bar> {
<chords> Dbmaj7 / E7 </chords> "chords": "Dbmaj7 / E7",
</bar> },
<bar> {
<chords> Amaj7 / C7 </chords> "chords": "Amaj7 / C7",
</bar> },
<bar> {
<chords> Cm7 / F7 </chords> "chords": "Cm7 / F7",
</bar> },
{
What is the implication of
<bar> finalBarLine: "false"
<finalBarLine/> "finalBarLine": "true",
<chords> Fmaj7 </chords> "chords": "Fmaj7",
</bar> }
</song> ]
}

© Louis D. Nel 2017 COMP 3005 JSON basics 9

 XML vs JSON –JSON trick 1
{"song",
song> { How do we know this is
<title> 26-2 </title> "title": "26-2", a song?
<composer> John Coltrane </composer> "composer": "John Coltrane",
<musicalStyle> Medium Up Swing "musicalStyle": "Medium Up Swing",
</musicalStyle>
"key": "F",
<key> F </key> "bars": [
<bar>
{
<timeSignature> 4/4 </timeSignature>
"timeSignature": "4/4",
<rehearsalLetter> A </rehearsalLetter>
"rehearsalLetter": "A",
<leftDoubleBarLine/>
"leftDoubleBarLine": "true",
<chords> Fmaj7 / Ab7 </chords>
"chords": "Fmaj7 / Ab7",
</bar> },
<bar>
{
<chords> Dbmaj7 / E7 </chords>
"chords": "Dbmaj7 / E7",
</bar>
},
<bar>
{
<chords> Amaj7 / C7 </chords>
"chords": "Amaj7 / C7",
</bar> },
<bar> {
<chords> Cm7 / F7 </chords>
"chords": "Cm7 / F7",
</bar>
},
<bar>
{
<finalBarLine/>
"finalBarLine": "true",
<chords> Fmaj7 </chords>
"chords": "Fmaj7",
</bar> }
</song>
]
}
}
© Louis D. Nel 2017 COMP 3005 JSON basics 10
 JSON as interchange data format

• JSON is the primary format for moving data between

web clients and javascript-based servers (like
[Link]-based servers)

• XML was more popular with non javascript-based

servers and large application templates (e.g.
MusicXML)

• URL-encoded data is popular with HTML form

elements.

© Louis D. Nel 2017 COMP 3005 JSON basics 11