Topic 3: JSON

What is an JSON?

JSON stands for JavaScript Object Notation. It is a way to store information and exchange information by using a syntax. That syntax is JSON. It is simply text. Data can only be text when it is exchanged between the browser and server. This means that you have a way to store complex objects with properties and objects inside of those objects. You can also access those objects through JavaScript.

For example, if you had a website that listed different games and the information about each game, you could store it in a JSON file. Every time you need to display that information, you can use JavaScript to display on the page to the user.

JSON Syntax

JSON is written in text. It uses a name/value pair to write the data. Curly braces contain the name/value pairs, as an object. The name is written in double quotes then a colon, then the value. Each name/value pair proceeds with a comma unless it is the last in the curly brackets.

JSON Syntax

I highly recommend watching the following two videos by The Coding Train from YouTube. He does an excellent job explaining new concepts. He is entertaining but also serious and passionate about the work he does. I like that I can feel like I'm getting a lecture on campus.

Resources




The JavaScript function JSON.parse() allows you to take text received from a JSON file or some web server and convert it into an object, written in JavaScript syntax.

Example

For this demonstration, I will simply enter JSON text as a string into my JavaScript file, then parse it to make an object. I can then use this object to output whatever data I need.

Resources



The JSON.stringify() function is basically the opposite of parsing. It takes a JavaScript object and converts it into a string in JSON syntax. This could be useful when you need to add an object into the JSON file. In order to do this, it has to be a string.

Example

Using the same example from before, I will create a new object in Javascript, then use Stringify to convert it to text.

Resources




Teaching Video

My teaching presentation starts at 7:30 and ends at 12:10.