Parsing JSON

Post navigation

First, what is JSON?

JSON is short for JavaScript Object Notation. It is designed to store and move data that’s sent between the server and the browser. One of the greatest things about JSON is that it is completely language independent. This means that it can be read by many programming languages and look familiar to all of them. Each programming language has a slightly different method of parsing JSON.

How does JSON look?

JSON data is received as an enormous concatenation of characters, also known as a “string”. Inside of this string, are tags as well as “key : value” pairs.

1

'{ "breed":"Schnauzer", "gender":"male, "age":2, "name": "Spot"}'

The string begins with a mustache bracket {and ends with another}.

Each key / value is separated by a colon :

The key : value pairs are separated by a comma ,

As you can see, the first “key” is “breed” and the “value” it holds is “Schnauzer”. Imagine receiving a JSON string with all of the dogs currently in your city’s Humane Society? The string would be so massive, it would practically be unreadable and would quickly become confusing.
This is where “parsing JSON” comes into play!

The JSON.parse() Function

What is parsing?

The meaning of parsing is to analyze or examine a specific string.
JSON.parse() is defined in ECMA-262 5th Edition (the specification that JavaScript is based on). Its usage is simple:
It is a function that takes in a JSON string or a variable containing a JSON string and returns a Javascript object.

Notice that we declared the variable dog, initialized with the JSON.parse () function and passed in the string as the parameter. If we were to log the “dog” variable, we would get the final result as a Javascript object.

1

2

3

4

5

6

vardog={

"breed":"Schnauzer",

"gender":"male",

"age":2,

"name":"Spot"

};

The job of the parser is to take the JSON string and break it up into a Javascript Object(s). The object is now cleaner and much more readable.
Now that we have a Javascript object inside a variable, we can simply refer to the name of the property we need. For instance, to access information about the dog, use the Javascript “Object.property” rule.

1

2

3

4

5

6

7

8

9

10

vardog={

"breed":"Schnauzer",

"gender":"male",

"age":2,

"name":"Spot"

};

document.write("My dog's name is",dog.name);// This would output "My dog's name is Spot"

document.write("I have a",dog.breed,"and he is",dog.age,"years old");// This would output

"I have a Schnauzer and he is 2 years old"

In this case, “Object” is the variable containing the object and “property” is the key holding a certain value.

Working with large amounts of JSON data

If you owned more than one dog, how would you separate each dog and send it as a JSON string? To do this, we enclose multiple objects in square brackets and separate them by a comma, also known as an array.

As mentioned before, after several dogs, this can become very confusing. Let’s parse the data and see what we get. However, this time we will pass in the variable instead of the JSON string inside the parse () function.

We can see that when we passed in the variable “dogs” to the JSON.parse() function, the result was an array with three objects. What if you would like to access each of the dog’s name? Hopefully you have some knowledge on how Javascript arrays work. However, to grab this information, we need to access the array index of the dog we wish to output.

1

2

3

4

5

6

7

vardogs=[{breed:'Schnauzer',gender:'male',age:2,name:'Spot'},

{breed:'Poodle',gender:'female',age:1,name:'Pooch'},

{breed:'Labrador',gender:'male',age:3,name:'Felix'}];

document.write("The first dog is",dogs[0].name)// This would output "The first dog is Spot"

document.write("The second dog's name is",dogs[1].name)// This would output "The second dog's nameis Pooch"

document.write("The third dog's name is",dogs[2].name)// This would output "The thrid dog's name is Felix"

The index of the first dog is 0, the second dog is 1 and the third dog is 2.

Nesting JSON data

Let’s say that you have an object which contains a certain number of keys and each key contains another object. It is an object inside of an object! It’s object-ception! This is called nesting objects. Let’s look at some nested objects in raw JSON form.

1

2

3

vardogs='{"Spot": {"breed": "Schnauzer","age": 2,"gender": "male"},

"Pooch" : {"breed": "Poodle", "gender": "female","age": 1}, "Felix":

{"breed": "Labrador", "gender": "male", "age": 3}}';

This is even more confusing!

Let’s re-initialize the variable with the JSON.parse() function and pass in the JSON string. Afterwards, we will output the result and see what we get.

We can see that the main object holds three keys, “Spot”, “Pooch”, and “Felix”. These dog names each hold their own object with their specific information. I think that accessing information in nested objects is a little easier to understand than with arrays.