Code 4 Tomorrow

1.1 JSON

JSON, or JavaScript Object Notation, is a fairly simple tool for formatting and transmitting data. It is often used for sending data between APIs and computer systems. Despite having a syntax derived from Javascript, JSON can be used in many languages from Python, Java, C++, C, and many more; it is language independent. JSON is stored as plain text (not belonging to any language) and has low file sizes. All of the above makes JSON easy to transfer and work with.

How JSON Works:

Data comes in name:value pairs. This should be a familiar format for those familiar with coding as an object (as in the case of JSON), dictionary, hash table, etc

Multiple pairs may create an ordered list (a JSON array). This is a widely known format as well, called an array, list, vector, etc.

For example, using JSON to create the object “cats”:


'{
"Cats":[
{"cat_name": "Persian"}
{"cat_name": "Sphynx"}
{"cat_name": "Siamese"}
]
}'

Each unordered set of name:value pairs is considered an object and enclosed in curly brackets. They are separated by commas. The full list of values is considered an array and enclosed by square brackets. A value in the name:value pair can be a string, number (including scientific notation), boolean, array, object (most common) or even null!

For example, adding onto the example above:


‘{
“Cats”: [
{“cat_name”: “Persian”, “cat_rank”:2}
{“cat_name”: “Sphynx”, “cat_rank”:1}
{“cat_name”: “Siamese”, “cat_rank”:3}
{“cat_name”: “Munchkin”, “cat_rank”: Null}
]
}’

We don’t have to only write arrays in JSON. We can also write strings of objects:


'{"cat_name": "Persian"}'

While data can be extracted from a JSON string (with JSONata), it’s most commonly converted into Javascript to be read. Due to how similar the syntax of JSON and Javascript are, Javascript contains functions designed to convert strings and arrays of JSON into Javascript objects and arrays and back again. This is called deserialization:


JSON.parse(JSON string)

Converting code into JSON text is called serialization. To convert Javascript objects into JSON strings we use:


JSON.stringify(code object)

For example, to convert our JSON array into a Javascript array we can do:


const Cats = '{"Cats": [{"cat_name": "Persian", "cat_rank":2} {"cat_name": "Sphynx", "cat_rank":1} {"cat_name": "Siamese", "cat_rank":3}'
const cats_js = JSON.parse(Cats)
console.log(Cats.cat_name)

And to convert the Javascript array back into a JSON array we can do:


const cats_JSON = JSON.stringify(cats_js)

While JSON integrates nicely into Javascript due to its near identical syntax, to use JSON in other languages requires importing the Json module.

Once converted into Javascript, you can splice and find elements in the object/ array as normal.

While you may manually write JSON code, for more complex projects it’s advisable to use a JSON Editor. Code editors such as VS Code often have this feature and it can also be found online in places such as JSONEditorOnline.

Another simple 3 object JSON string:


'{"plane": { "make": "Lockheed Martin", "plane_details": { "model": "SR-71 Blackbird", "top_speed": "mach 4.6 (3540 mph)", "type": "strategic reconnaissance", "first_use":   1966} } }
{"plane": { "make": "North American Aviation", "plane_details": { "model": "P-51 Mustang", "top_speed": "mach 0.92 (703 mph)", "type": "long range fighter-bomber", "first_use": 1940 } } }
{"plane": { "make": "Focke-Wulf", "plane_details": { "model": "FW 190", "top_speed": "mach 0.89 (685 mph)", "type": "fighter", "first_use": 1942 } } }'

Can you convert this JSON string into Javascript code?

Now that we know the basic syntax of JSON, try writing your own data. Start by opening a code or text editor such as Notepad, VS Code, Eclipse, etc, and create a file ending in .json. Some editors may need a plugin such as JSON Editor. Try writing your own JSON code using the format:


{
	“key”: “value”, 
	‘key”: “value”,
	“key”: [“value”, “value”]
}

Next Section

2️⃣

1.2 Practice: Parsing JSON

⚖️

Copyright © 2021 Code 4 Tomorrow. All rights reserved. The code in this course is licensed under the MIT License. If you would like to use content from any of our courses, you must obtain our explicit written permission and provide credit. Please contact classes@code4tomorrow.org for inquiries.