Most modern web browsers support native JSON encoding and decoding. Let's examine the methods available inside this object:

Let's learn how to encode and decode with the JSON notation by creating a simple model—a 3D line. Here, we will be focusing on how we do JSON encoding and decoding. Follow the given steps:

1. In your browser, open the interactive JavaScript console. Use the following table for assistance:

2. Create a JSON object by typing the following:

const model = { vertices: [0, 0, 0, 1, 1, 1], indices: [0, 1] };

3. Verify that the model is an object by writing the following:

typeof(model); // outputs "object"

4. Let's print the model attributes. Write this in the console (press Enter at the end of each line):

model.vertices // outputs the vertices
model.indices // outputs the indices

5. Let's create a JSON text:

const text = JSON.stringify(model);
alert(text);

6. What happens when you type text.vertices?
7. As you can see, you get a message saying that text.vertices is undefined. This happens because text is not a JavaScript object, but a string with the peculiarity of being written according to JSON notation to describe an object. Everything in it is text, and so it does not have any fields.
8. Let's convert the JSON text back into an object. Type the following:

const model2 = JSON.parse(text);
typeof(model2); // outputs "object"
model2.vertices; // outputs vertices

What just happened?

We have learned to encode and decode JSON objects. These exercises are relevant because we will use the same process to define our geometry to be loaded from external files. In the next section, we will see how to download geometric models specified with JSON from a web server.