JSON JavaScript featured image

A Tutorial on Working with JSON in JavaScript

Introduction

There are many ways that JSON can be used in JavaScript. One of its most basic uses is storing data. You can also use it to transfer data between clients, between servers, or from server to client. Other useful applications include the ability to configure and verify data as well as generate data structures.

In this tutorial, we will explore how you can use JSON in your JavaScript programs. If you have prior experience programming with JavaScript, this should feel straightforward for you.

What is JSON?

JSON stands for JavaScript Object Notation. It is a format designed to enable the sharing of different types of data. JSON mainly utilizes JavaScript as its primary programming language. It also works with other languages like Python, PHP, Ruby, as well as Java. It is easy to read, extremely lightweight, and does not require much formatting. You can get acquainted with the format’s general syntax and structure by following our tutorial: An Overview of the JSON Data Sharing Format.

JSON can be used on its own or defined in another file format. When on its own, it uses the .json extension. When in another format, it appears either as a JSON string inside quotes or as an object assigned to a variable. For example, JSON can be used in .html format as well. This format allows you to perform data transfer between the server and the browser with relative ease.

The JSON format is text-based. The key-value data appears in curly brackets. Here is what a typical  file .json looks like:

If you have a JSON object in a .js or .html file, it will appear as a variable like this:

In some cases, you may see them all in one line. This is when the JSON renders as a string instead of as an object in the JavaScript file:

You can convert JSON objects into strings. This is useful when you want to perform quick data transfer.

JSON vs JavaScript Object

As we mentioned before, JSON works with any programming language. However, you can only work with JavaScript objects using JavaScript. The syntax in JSON and JavaScript is similar. The difference is that JavaScript objects appear in strings instead of quotes. Additionally, JavaScript objects can use functions as values, meaning they are less limited.

In the following example, we are showing the JavaScript option of a user. The user is Sammy Shark and they are online right now:

As you can see, there are no quotes around any keys like first_name, last_name, online, or full_name. Also, there is a function value placed in the last line. If you want to access the data in string form, you can call user.first_nameusing dot notation. If you want the full name instead, you will use user.full_name(), as it is a function.

How to Access JSON Data

Like we touched in the last section, you can access JSON data in JavaScript using dot notation. Let’s take the example of a JSON object named sammy:

Our dot notation to access the values will be:

The variable comes first. After that, we place a dot. Lastly, we mention the key we want to access.

Let’s say we want to make an alert in JavaScript that shows the value of the first_name key. To make it appear in a pop up, we will use the JavaScript alert() function like this:

Another way to access the data from JSON is by using the square bracket syntax. The key should be placed in double quotation marks within the square brackets. Here is a continuation of the previous example:

What if you are working with nested array elements? In this case, you have to call the number of the item in the array. Take the following example:

Say we wish to access the string facebook. Here is how we will use dot notation to access that item in the array using its number:

Remember to add an additional dot for each nested element.

Functions Used with JSON

Next, we will look at a couple of functions you can use with JSON. Data transfer and storage becomes quite easy when you can convert JSON from object to string or string to object. We will explore how you can stringify and parse JSON in two different ways:

  • JSON.stringify()

Strings are better to use when trying to transfer data in a lightweight manner. That is why it is used to store and transfer data from client to server. Consider the following example. Let’s say you are collecting data of the user’s settings on one machine. You need to send this information to your server. You would use string for this purpose. Then you can convert it back using JSON.parse() to read and work with it.

The function we will highlight here is JSON.stringify(). This function converts a JSON object into a JSON string. In this example, we will assign our object to the variable obj. We will convert it using the  JSON.stringify() function. To do this, we will pass the obj to the function and then assign the string to the variable s like so:

Calling the s variable will give you the JSON as string:

  • JSON.parse()

Understandably, JSON.parse() serves the opposite function. After you are done transporting the data, you need to convert it back to JSON object so you can work with it. One option is to use the eval() function. However, this approach is not too safe. That is why we prefer to use the JSON.parse() function.

Consider the previous example once more. We will pass the string s to the JSON.parse() function. Then, we will give it a new variable:

Our new object is now o. It will be the same as obj. More insight comes when we consider JSON.parse() in an HTML file like this:

json parse

Here, you can actually see how we converted string s into a retrievable object. Thus, JSON.parse() is a secure option for converting JSON strings into objects.

Conclusion

As we saw throughout this tutorial, JSON has a lot of implementations in JavaScript. It is especially useful since it can be used with almost any programming language, making it the natural option. On top of that, we only just scratched the surface. There is so much more that you can do with JSON. It is already being supported in APIs.

Here are further resources from our blog that will help you program with JavaScript:

Happy Computing!