🟨JavaScript and JSON

the preferred data format of the internet

JSON (JavaScript Object Notation) allows for storing small sets of data in a relatively simple but robust structure:

The basic structure of a JSON object

The simplest JSON object looks like:

{ "property" : "value" }

In a browser console, let us take the basic JSON object above into JavaScript and assign it a variable called jsonObject:

let jsonObject = { "property" : "value" }
console.log(jsonObject)
// { property : "value" }

Notations for the notations

We could then use the dot notation object.property in the console:

jsonObject.property
> "value"

Or, we could use the bracket notation object["property"]:

jsonObject["property"]
> "value"

The bracket notation becomes useful when the property names lengthen, so much that we would need to use "kebab-notation", the stringing of multiple words with dashes!

let obj = { "example-of-a-very-long-property-name" : "its value" }

We would then access that property like such:

obj["example-of-a-very-long-property-name"]
> "its value"

Objects with more than one property

Naturally, an object could have multiple property-value pairs:

{ 
  "property1" : "value1", 
  "property2" : "value2", 
  "property3" : "value3", 
  ... 
} 

Calling the above jsonObject, we would enter jsonObject.property2 or jsonObject["property2"] into a console to yield "value2"

jsonObject["property2"]
> "value2"

Objects inside of objects

The object could also have properties with values that themselves have sub-objects:

{ 
  "property1" : { 
    "property1A" : "value1A" 
  }, 
  "property2" : { 
    "property2A" : "value2A", 
    "property2B" : "value2B" 
  }, 
  "property3" : "value3" 
}

Calling the above jsonObject, we could enter one of the following:

• jsonObject.property2.property2B

• jsonObject["property2"]["property2B"]

jsonObject["property2"]["property2B"]
> "value2B"

We can then infer here that this versatile structure could allow for quite complex objects with many properties and sub-properties to the desired degree!

JSON.parse()

Converts a JSON string into a JavaScript object:

'{"name":"Jon","age":100}`

When passed into JSON.parse:

const parsedObject = JSON.parse('{"name":"Jon","age":100}`)

The parsedObjectvariable will become this:

{
  name: "Jon",
  age: 100
}

JSON.stringify()

Converts a JavaScript object into a JSON string so that this:

const user = {
    name: "Jon",
    age: 100
}

passed into the JSON.stringify:

const jsonString = JSON.stringfy(user)

becomes this JSON string:

'{"name":"Jon","age":100}'