What is JSON? (For beginners)

XML for a very long time has been the the rule for encoding a document in a format that was both human and machine readable. This has been a significant tool for exchanging data between servers and remote and has been practiced by most developers. But we now have a new substitute for it called “JSON”.

Getting Started

So if you are here I am guessing you know a bit of JavaScript, objects and arrays. JSON is kind of a mix of all of this.

So let’s get started.

1. What does JSON Stand For?

JSON stands for JavaScript Object Notation.

2. What is JSON?!!

JSON stands for JavaScript Object Notation and is a lightweight format for storing and transporting data. We often use it when we need to GET(fetch) data from a server or POST(send) data to the server. It is based on JavaScript Object Literals in a text format. This was an amazing substitute of XML as it is less verbose (more compact), Readable, Faster and lastly the structure matches the data accurately.

JSON is also language Independent; which means that data can be parsed and generated irrespective of the programming language used.

3. JSON Syntax Example

The JSON syntax is mainly based on two structure concepts, i.e. Arrays and Objects.

Object Declaration

{
 “crew”:[
     {“firstName”: ”Walter”, “lastName”: ”White”},
     {“firstName”: ”Jesse”, “lastName”: ”Pink”},
     {“firstName”: ”Hank”, “lastName”: ”Schrader”},
     {“firstName”: ”Gus”, “lastName”: ”Fring”}
   ]
}

This example defines the ‘crew’ object: an array of 4 character records (objects). Yea I’m a huge fan of Breaking Bad.

Basically an object array of objects.

Array Declaration

[
    “Orange”, “Apple”, “Grapes”, “Mango”, “Tomato”, “Banana”
]

Yes, Tomato is a fruit.

4. Key and Values

The two principal parts that make JSON are keys and values. Together they make this wonderful pair called “Key/Value pair”.

As I brought up before that JSON syntax is based on the concept of JavaScript Object Literals. You must have also noticed that the syntax isn’t that much different from how we write JavaScript.

Key: A key is always a string enclosed in quotation marks.

Value: A value can be a string, a number, a Boolean expression, array, or an object.

{“firstName”: ”Walter”, 
 “lastName”: "White”,
 "income": 80,
 "isRich": true
 }

The Key is “firstName” and the value is “Walter”

I was going to give a Boolean spoiler in the above example, but then thought I shouldn't.

So as you all must have realised by now that we defined the JSON data based on an object which represents the character’s data, like, first name. last name, income and a Boolean to know whether that person is rich or not.

Some syntax rules you should follow (according to W3schools):

• Data is in name/value pairs
• Data is separated by commas
• Curly braces hold objects
• Square brackets hold arrays

5. JSON.parse()

When we are receiving data from a web server or fetching data using an API, the data returned is always a string.

Imagine we fetch some data from the server like this:

'{“firstName”: ”Walter”, “lastName”: ”White”, "age": 50}'

We have to use the JavaScript function JSON.parse() to convert the text into a JavaScript Object.

var obj = JSON.parse('{"firstName": "Walter", "lastName": "White", "age": 50}');

6. JSON.stringify()

The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing value if a replacer function is specified or optionally including the specified properties if a replacer array is specified.

Syntax

JSON.stringify(value[,replacer[,space]])

Example:

console.log(JSON.stringify({ x: 15, y: 26 }));
// expected output: “{“x”:15,”y”:26}”

7. What are the types of valid JSON values?

In JSON, values MUST be of the following data types:

• a string
• a number
• a Boolean
• an object (JSON Object)
• an array
• a Boolean
• null (“”)

*NOTE: Null values and empty strings (“”) are valid JSON values, but the state of being undefined is not valid within JSON.

In Summary,

JSON is a minimal data format which is used to send data from the server to client in a compact and understandable format and can be used to transmit data to a web application. If used correctly, JSON can be used to decode an entire site’s worth of data.

You have reached the end of this article. Thank you for reading.

Happy hacking!