Understanding JSON and how it works

What is JSON?

For those who are unfamiliar, JSON is a standard format for structuring data, not too dissimilar to XML, when transferring data from a client (such as your phone or web browser) to a server the data can only be text, and JSON allows you to structure your data to your needs.

JSON stands for JavaScript Object Notation and while the standard was designed with JavaScript conventions, JSON can be used with any programming language.

Understanding basic JSON Syntax

Some of the basic Syntax rules for JSON are as follows:

• Data is written in name/value pairs
• Names and values are separated by a colon ( : )
• Names are written in double quotes ("name")
• Data is written in double quotes if it is text ("name":"data")

The following is some sample JSON, ignore the curly braces( { ) for the moment and just look at how the data is formatted. When we have a string value we use double quotes, however, when we use numbers, those quotes are not required.

Also, note that when specifying multiple name/value pairs a comma is required to separate the data, you don't require a comma at the end if it's the last name/value pair or if you are only specifying a single pair.

{
  "Brand": "Pixel",
  "Version": 1,
  "OperatingSystem": "Android"
}

Understanding JSON structures

JSON Object

In JSON there are two types of structures you can use, the first is called a JSON Object. A JSON Object is a structure where you can specify a single set of data, for example, if you were creating a JSON database of different phones this is something that wouldn't be practical as a JSON Object, however, if you only wanted to show data on a single phone then a JSON Object would be perfect.

A JSON Object uses curly braces to indicate the start and end of an object, and while you can see I have specified the name "phone" for my object in the example below, this is not always required.

  "phone": {
    "Brand": "Pixel",
    "Version": 1,
    "OperatingSystem": "Android"
  }

JSON Array

Another type of structure you can use in your JSON is a JSON Array. An array structure can hold multiple values and has an index similar to a list.

JSON Arrays use a slightly different syntax, the start of an array is specified by a square bracket ( [ ) rather than a curly brace. In the following example, you can also see that we don't have name/value pairs we just have values. In a JSON Array you cannot use names.

{
  "phonebrands": [
    "Pixel", "LG", "Huawei"
  ]
}

You can also notice in the example that the array is wrapped in a JSON Object, because our array has the name "phonebrands" it is required to be wrapped in an object, You can, however, use an array without being wrapped in an object by removing the name like so.

  [
    "Pixel", "LG", "Huawei"
  ]

Combining JSON Objects and JSON Arrays

JSON Objects and JSON Arrays can be combined to create some very useful JSON based databases, we previously mentioned about having a database of different types of phones and their specifications, now we'll show you how you can combine the two structures.

The secret to creating this is that JSON arrays can contain JSON Objects, this allows us to add more than one value to a single array index, take a look at the following example to understand how this works.

{
  "Version": 5,
  "Source": "thunkableblocks.blogspot.com",
  "phones": [
    {
      "Manufacturer": "Google",
      "Model": "Pixel",
      "OperatingSystem": "Android"
    },
    {
      "Manufacturer": "Huawei",
      "Model": "Nexus 6P",
      "OperatingSystem": "Android"
    },
    {
      "Manufacturer": "Apple",
      "Model": "iPhone",
      "OperatingSystem": "iOS"
    }
  ]
}

Icons made by Madebyoliver from www.flaticon.com is licensed by CC 3.0 BY

Icons made by Roundicons from www.flaticon.com is licensed by CC 3.0 BY