JSON: A Quick Look & Practice

JSON Basics

Here are some annotations of a JSON string:

{
  "array": [
    1,
    2,
    3
  ],
  "boolean": true,
  "null": null,
  "number": 123,
  "year_created": 2019,
  "object": {
    "a": "b",
    "c": "d"
  },
  "string": "Hello World",
  "url": "https://mcmassociates.io/"
}

Notice the following:

All labels are in quotation marks followed by a colon.
An array is enclosed in square brackets; array elements are punctuated with commas, except for the last.
Each JSON element ends with a comma.
Boolean, null, and numeric values do not use quotation marks.
Multiple words in a label must be connented with an underscore (year_created)
Text values must be enclosed with quotation marks.
Each object element is enclosed in quotation marks, and all are enclosed in curly braces.
The entire JSON string is enclosed in curly braces.

JSON Examples

Here are examples from SWAPI Star Wars API:

{
"films":           "https://www.swapi.tech/api/films",
"people":          "https://www.swapi.tech/api/people",
"planets":         "https://www.swapi.tech/api/planets",
"species":         "https://www.swapi.tech/api/species",
"starships":       "https://www.swapi.tech/api/starships",
"vehicles":        "https://www.swapi.tech/api/vehicles"
}

Above, people is selected (as highlighted in red). The space between the label and value is just clarity, not required.

0       
uid     "1"
name    "Luke Skywalker"
url     "https://www.swapi.tech/api/people/1"
1       
uid     "2"
name    "C-3PO"
url     "https://www.swapi.tech/api/people/2"
2       
uid     "3"
name    "R2-D2"
url     "https://www.swapi.tech/api/people/3"
3       
uid     "4"
name    "Darth Vader"
url     "https://www.swapi.tech/api/people/4"

Above, UID 1 is selected (as highlighted in red).

height          "172"
mass            "77"
hair_color      "blond"
skin_color      "fair"
eye_color       "blue"
birth_year      "19BBY"
gender          "male"
created         "2025-01-08T01:40:19.009Z"
edited          "2025-01-08T01:40:19.009Z"
name            "Luke Skywalker"
homeworld       "https://www.swapi.tech/api/planets/1"
url             "https://www.swapi.tech/api/people/1"
description     "A person within the Star Wars universe"

To print an JSON string (improperly called an object):

<!DOCTYPE html>
<html>
<body>
<h2>Access a JavaScript object</h2>
<p id="demo"></p>
<script>
const myObj = {name:"Luke Skywalker", eye_color: "blue", gender:"male"};
document.getElementById("demo").innerHTML = myObj.name;
</script>
</body>
</html>

Accessing this HTML in a browser would output like this:

Practice

Format this scrambled, wordy paragraph as a JSON list. Use Best Online JSON Formatter as much as you wish; it points out errors but does not correct!

In http://superpowerscentral.com/hero_list.html,

The main Marvel heroes are Spider Man and Black Panther. Respectively, their powers are as follows: wall-crawling, spider sense, superhuman agility, superhuman strength, superhuman reflexes, superhuman stamina, enhanced durability, web-shooting; enhanced agility, superhuman reflexes, enhanced strength, superhuman stamina, enhanced healing, enhanced senses, longevity, expert strategist, vibranium suit. The hero list includes Marvel Heroes and DC Heroes. The main DC heroes are Super Man and Wonder Woman. Respectively, their powers are as follows: super strength, flight, super speed, invulnerability, super hearing, enhanced vision, heat vision, x-ray vision, solar energy absorption, freeze breath, longevity; super strength, enhanced speed, flight, expert hand-to-hand combatant, enhanced reflexes, bracelets of submission, enhanced durability, immortality, lasso of truth manipulation, divine empowerment.

Complete This Unit

Name your file (or files) with some identifying part of your name followed by _json, for example, davidmc_json.html.
Either:

Send your file (or files) by e-mail attachment to McMurrey at admin@mcmassociates.io (use this link).
or
Upload your file (or files) to your website, and send the URL to McMurrey at admin@mcmassociates.io (use this link).

Your instructor will review, point out any problems, enabling you to revise and resend.

Return

Return to your bookmarked course main page.

Related Information

What is JSON?. AWS

API Formats: Why JSON won over XML. See "Why is JSON a better fit for APIs?"

Best Online JSON Formatter

Advantages and disadvantages of JSON over SQL

JSON Databases Explained. Reviews advantages, including MongoDB

JSON Introduction. w3s

JSON vs. SQL: What’s the Difference?

Information and programs provided by admin@mcmassociates.io.