Introduction to JSON with Examples

Over the last couple of years I have been marvelling that the pervasiveness and elegance of JSON, if you are working with data, API’s, server requests or database migrations then there is a good chance that you are going to come across a payload that contains this format. If you are lucky it will be this format!

What is JSON?

It stands for JavaScript Object Notation ( JSON ), It was derived from JavaScript (JS) as the name suggests and is a subset of JavaScript, it came about after object literals and array literals were added to the language. One of its great strengths is that it works across all programming languages. Because of this it is arguable the most populate way to store and transfer data across systems, API requests and migrating database data are two really populate uses.

When giving someone JSON data it should be in a FILE_NAME.json format, it generally is not a issue if it is a FILE_NAME.txt or other because it is plain text inside.

Syntax and Data Types

JSON data is stored as key/value pairs which is the same as Javascript Object properties, each item is separated by a comma, the object is sourraounded by {} curly brackets and arrays are sourrounded by [] the square brackets. The data itself has a Key/Name component which is sourrounded by “” double quotes followed by : (colon) and then the value (types are string ,number, null, boolean, array, object )

JSON Strings

Strings in JSON are contained by double quotes

{
    "firstName": "Matt",
    "lastName": "Heff"
}

JSON Null

Null values are empty values

{
    "dob": null
}

JSON Boolean

Boolean values are true or false in JSON

{
    "education" : false
}

JSON Numbers

A number must either be an integer ( eg 10 ) or a floating-point ( eg 10.1 )

{
    "age" : 15
}

JSON Object

JSON Objects elements which are wrapped in curly brackets, inside a object we can have any number of key/value pairs, each is separated by a comma.

{
    "firstName": "Matt",
    "lastName": "Heff",
    "dob": null,
    "education" : false
}

JSON Arrays – Multiple Records

JSON arrays are wrapped with the square brackets. Inside an array we can have as many objects as we like, each needs to be separated by a comma.

[
  {
    "firstName": "Matt",
    "lastName": "Heff",
    "dob": null,
    "education": false,
    "age": 15

  },{
    "firstName": "John",
    "lastName": "Smith",
    "dob": "12/12/2000",
    "education": true,
    "age": 21
  }
]

Multiple Records in an Array with Nested Array

[
  {
    "firstName": "Matt",
    "lastName": "Heff",
    "dob": null,
    "education": false,
    "languages": ["JSON","Solidity","JavaScript","Node.js"],
    "age": 15
  },
  {
    "firstName": "John",
    "lastName": "Smith",
    "dob": "12/12/2000",
    "education": true,
    "languages": null,
    "age": 21,
    "educationItems": 
         [
           {"schoolLevel":"High School","yearGraduated":2020},
           {"schoolLevel":"University","yearGraduated":null},
        ]
  }    
]

Wrangling JSON Data in JavaScript

JSON is based on a subset of the JavaScript language, so it works really nicely with JS. We are able to convert JSON data into JavaScript objects pretty simply and with tools built in.

There is a JSON object in JavaScript that offers us two methods where we can encode/decode JSON data. parse() and stringify()

When we recieve a JSON data payload from a server/api request it is not going to be a Javascript Object by default, it is going to be a string so we will need to convert it into a JavaScript Object like below:

// from our JSON example above we make a sample string
const jsonDataExampleString = `{    "firstName": "Matt",    "lastName": "Heff",    "dob": null,    "education": false,    "age": 15 }`;

// lets convert it into a JavaScript Object!
const record = JSON.parse(jsonDataExampleString);

console.log(record.firstName); Matt
console.log(record.lastName); // Heff
console.log(record.dob); //null
console.log(record.education); //false
console.log(record.age); // 15

When we need to send some JSON over a request or two write it into a file we need to convert it to a string, JSON.stringify() does this for us:

// Make a JavaScript Object that is correct JSON
const record = { 
    "firstName" : "Matt",
    "lastName" : "Heff",
    "dob" : null,
    "education": false,
    "age": 15
}

// convert the object into a string
const jsonDataExampleString  = JSON.stringify(record );


console.log(jsonDataExampleString);

//{    "firstName": "Matt",    "lastName": "Heff",    "dob": null,    "education": false,    "age": 15 }

JSON Resources

Introducing JSON — Learn about JSON language supported features.
JSONLint — A JSON validator to verify if the JSON string is valid.
JSON.dev — A little tool for viewing, parsing, validating, minifying, and formatting JSON.
JSON Schema — Annotate and validate JSON documents according to your own specific format.

javascript json programming