JSON

If you've been following along with the previous lessons, you'll have a good understanding of objects and arrays, which allow our programs to keep track of data (objects and arrays are both data structures - ways of structuring data in a program).

Objects and arrays are stored in the computer's memory (RAM) when your page runs in the browser. And when the browser window is closed, or when the user leaves your page, all of this data is wiped away from the computer's RAM. Normally, this is not what we want. Instead we want to save the data, so that when the user returns to the page the data is restored to the state that it was in when they left. In order to do this, we need to make the data persistent. Data persistence is when data is saved when a user stops using a program, and restored when the user returns to the program.

Hopefully you can already see the importance data persistent applications. Without persistence, a data-driven application is useless. Imagine if you are using an application to keep track of your tasks, and every time you close the application all of your tasks are lost? Instead, you want to be able to return to your program and see all the tasks that you created previously.

We are about to delve into the all-important topic of building data persistent applications! There are two key components to creating data persistent applications:

1. Encoding the data is transforming the data into a format that allows you to store it.
2. Storing the data on the computer's hard drive so that it can be restored.

Encoding the Data

'Encoding' means changing data from one form to another. One example of encoding is converting a celsius temperature to fahrenheit. In this lesson, we'll focus on converting data in our programs (arrays and objects) into a format that can be saved in a file on a computer's hard drive.

There are lots of different ways to encode data. Some of them encode data into a binary format, which is all ones and zeros. But there are also many ways to encode data as a string, and that's what we'll be focusing on because it's much easier for us to understand strings than binary data. In this lesson we'll touch on encoding data in csv, xml, and finally json.

Let's assume that that we have an array of 'dog' objects running in our program, and that the code for it looks like this (maybe we are storing this array in a constant named dogs):

[
  {id:1, name:"Bruno", age:7, vaccinated: true},
  {id:2, name:"Snoopy", age:3, vaccinated: true},
  {id:3, name:"Lassie", age:12, vaccinated: false}
]

Encoding Data into a CSV Format

If you encode this data in a csv format, it might look something like this:

ID, NAME, AGE, VACCINATED
1, Bruno, 7, true
2, Snoopy, 3, true
3, Lassie, 12, false

csv stands for 'comma-separated values' (because the data in each line is separated by commas).

Try this activity:

1. Copy the csv data and paste it into NotePad, then save the file as 'dogs.csv'.
2. Open the file in any program that recognizes .csv file extensions. See what happens if you open the file with Microsoft Excel.

By doing these steps, you have persisted the csv encoded data by saving it to a file on your computer's hard drive.

If we have time in class, we can write a program that opens the dogs.csv file, reads the data, and converts it back into the original array that we started with.

Encoding Data into an XML Format

Another way to encode data is to convert it into XML. If you know anything about HTML, then you already know quite a bit about XML (HTML is actually a type of XML!).

XML uses elements and attributes to represent data (hopefully the terms 'elements' and 'attributes' will be familiar to you).

Here's what our array might look like if we encoded it into XML:

<dogs>
  <dog id="1" age="7" vaccinated="true">Bruno</dog>
  <dog id="2" age="3" vaccinated="true">Snoopy</dog>
  <dog id="3" age="12" vaccinated="false">Lassie</dog>
</dogs>

There are lots of different ways you could go about encoding data into XML. The 'X' in 'XML' stands for 'extensible', which means that you can create your own elements and attributes in order to encode data.

Encoding Data into a JSON Format

JSON is by far the most common format used to encode data in modern applications. One of the reasons for this is that it is based on JavaScript object notation. JSON actually stands for 'JavaScript Object Notation'. This means that if you understand the syntax for creating objects and arrays in JavaScript, then you basically already know JSON.

Take a look at this JavaScript variable:

const dog = '{"id":1, "name":"Bruno", "age":7, "vaccinated": true}';

Here's a bit of a trick question...what is the data type of this variable? If you don't look closely, you might say 'object'. But notice that it's actually a string (remember, we are talking about encoding data into some type of string format). This string is actually a JSON encoded/formatted string.

JSON is very similar to the syntax that you use for creating objects and arrays in JavaScript, but there are a few more rules. The main rule is that all property names must be enclosed in double quotes. Note that the id, name, age, and vaccinated property names (keys) are inside double quotes.

There are many references on the web regarding the rules of encoding data into the JSON format. Here's just one: W3C JSON.

If we wanted to store our array of dogs in a .json file, it would look like this:

[
  {"id":1, "name":"Bruno", "age":7, "vaccinated": true},
  {"id":2, "name":"Snoopy", "age":3, "vaccinated": true},
  {"id":3, "name":"Lassie", "age":12, "vaccinated": false}
]

JSON files (files that have a .json extension) are very common nowadays, and they are used in many different ways in software development. For example, many configuration and 'settings' files for applications use the JSON format. VSCode stores all your preferences in a .json file.

The beautiful thing about JSON is that it's very easy to encode an object or array in your program into a (JSON) string. Likewise, it's very easy to convert a JSON formatted string into an object or array so that you can use it in your program. This makes it a great option for getting started with data persistent applications.

The JSON API

There is an object built into JavaScript that you can use to convert an array or object into a JSON string. You can use the same object to convert a JSON string into an array or object. The object is named JSON and it has a method named stringify() that you can use to convert an object or array into a JSON string.

Try out this example:

const dogs = [
  {id:1, name:"Bruno", age:7, vaccinated: true},
  {id:2, name:"Snoopy", age:3, vaccinated: true},
  {id:3, name:"Lassie", age:12, vaccinated: false}
]

const dogsJSON = JSON.stringify(dogs);
console.log(dogsJSON);
console.log(typeof dogsJSON);

Note that when you call the stringify() method, you must pass in the object or array that you wish to 'stringify' as a parameter. The method will return a JSON (string) representation of the data.

You can use the parse() method of the JSON object to convert a JSON formatted string into an object or array. To see this, try out this sample code:

const dogArray = JSON.parse(dogsJSON);
dogArray.forEach(d => console.log(d.name));

In the next lesson (on localStorage) we'll see how we can use JSON strings to make data persistent web applications!

More info on JSON:

• W3C JSON Reference