Intermediate JavaScript:

JSON


Description

JSON is a coding language, but it's not a programming language. Its purpose is to represent data with no behavior attached. It's useful for saving state, transferring information across a network, writing config files or editing settings. And since it's a strict subset of the JavaScript language syntax, it's natural to use it in JavaScript programs and JavaScript-aware text editors.



 Slides

JSON

JavaScript Object Notation

  • a proper subset of JavaScript
  • basically, it's plain JavaScript without functions or variables
    • (or comments, or single-quoted strings, or a few other limitations)
  • used for data sans behavior
    • saving/loading to disk or database
    • transmitting information across network

Why JSON?

  • efficient to parse and compress
  • human-readable, for the most part
  • well-defined rules for whitespace and character encoding
    • always Unicode, usually UTF-8
  • very flexible data format
    • allows arbitrary nesting of arrays and objects (hashes)

Example JSON object

  {
    "Image": {
        "Width":  800,
        "Height": 600,
        "Title":  "View from 15th Floor",
        "Thumbnail": {
            "Url":    "http://www.example.com/image/481989943",
            "Height": 125,
            "Width":  100
        },
        "Animated" : false,
        "IDs": [116, 943, 234, 38793]
      }
  }

Its Image member is an object whose Thumbnail member is an object and whose IDs member is an array of numbers.

(from the spec)

Example JSON array

[
    {
       "precision": "zip",
       "Latitude":  37.7668,
       "Longitude": -122.3959,
       "Address":   "",
       "City":      "SAN FRANCISCO",
       "State":     "CA",
       "Zip":       "94107",
       "Country":   "US"
    },
    {
       "precision": "zip",
       "Latitude":  37.371991,
       "Longitude": -122.026020,
       "Address":   "",
       "City":      "SUNNYVALE",
       "State":     "CA",
       "Zip":       "94085",
       "Country":   "US"
    }
]

(from the spec)

Viewing JSON in Browser

  • Its mime-type is application/json which most browsers will display all on one line :-(
  • There are browser extensions that will render it better
    • Chrome: JSON Viewer (click on "Chrome Web Store" button to install)

json viewer screenshot

Viewing JSON in NodeJS Console

  • JSON is JavaScript
  • so if you copy a JSON blob and paste it into the Node REPL
  • it will look like this:
$ node
> { "Image": { "Width":  800, "Height": 600, "Title":  "View from 15th Floor", "Thumbnail": { "Url":    "http://www.example.com/image/481989943", "Height": 125, "Width":  100 }, "Animated" : false, "IDs": [116, 943, 234, 38793] } }
{ Image:
   { Width: 800,
     Height: 600,
     Title: 'View from 15th Floor',
     Thumbnail:
      { Url: 'http://www.example.com/image/481989943',
        Height: 125,
        Width: 100 },
     Animated: false,
     IDs: [ 116, 943, 234, 38793 ] } }

(beware multi-line strings though: https://github.com/nodejs/node/issues/21657 )

Parsing & Producing JSON

  • Assume the following is in a string named text :
let text = '{ "name": "Ada Lovelace", "id": 1, "title": "The Queen of Numbers" }'

The following code converts the String data into a JavaScript object:

let data = JSON.parse(text)

And this converts a JavaScript object back into a String:

let newText = JSON.stringify(data)

Using POSTMAN

https://www.getpostman.com/