WDD 230 | JSON

JSON

Overview

JavaScript Object Notation or JSON is an open standard, simple string data format which is consumed or exchanged between a client and server.

"JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (for example, sending some data from the server to the client, so it can be displayed on a web page, or vice versa) ... Even though it closely resembles JavaScript object literal syntax, it can be used independently from JavaScript, and many programming environments feature the ability to read (parse) and generate JSON."
- MDN

Prepare

JSON data format is ...

text-based.
stored in its own file with the extension .json.
closely paired to a literal JavaScript object and is converted to a native JavaScript object.
not dependent on a particular programming language.
pure property formatted data, there are no methods.
written using basic key/value pairs in this format: key:pair data types of strings, numbers, arrays, Booleans, and other object literals.

JSON syntax and data ...

requires double quotes to be used around string and property names and follows strict adherence to comma or colon placement.
can be accessed using JavaScript object notation.
can be checked with a linter like jsonlint.com to validate the JSON structure.
do not allow comments.

The JSON object has methods that allow you to convert or parse the string to an native object and we can stringify() a native object to a string using that same, built-in JSON object.

☑️ Here is an example JSON file. Directly open this file with your browser: JSON "Hero" Data Example - MDN

Can you identify the properties and the data types?

Here are some example property names and corresponding data types from this JSON file.

property: "squadName", data type: string
property: "formed", data type: number
property: "active", data type: Boolean
property: "members", data type: holds an array of objects (the object has four properties)

Activity Instructions

Add a folder name "lesson09" to your wdd230 course repository.
Add a new file named "new-ward-members.json" to the lesson09 folder.

Populate this new JSON file with valid syntax using the following data requirements:

The family name
The date the family moved into the ward
Number of people in the family (number of records)
Visited by bishopric?
Individual family members
1. Name
2. Gender
3. Birthdate

Check Your Understanding

{
  "wardInformation": {
  "familyName": "Smith",
  "moveInDate": "2022-03-15",
  "numberOfPeople": 7,
  "visitedByBishopric": true,
  "familyMembers": [
    {
      "name": "John Smith",
      "gender": "Male",
      "birthdate": "1985-05-20"
    },
    {
      "name": "Jane Smith",
      "gender": "Female",
      "birthdate": "1988-11-12"
    },
    {
      "name": "David Smith",
      "gender": "Male",
      "birthdate": "2010-02-03"
    },
    {
      "name": "Emily Smith",
      "gender": "Female",
      "birthdate": "2012-08-27"
    },
    {
      "name": "Michael Smith",
      "gender": "Male",
      "birthdate": "2015-04-10"
    },
    {
      "name": "Sophia Smith",
      "gender": "Female",
      "birthdate": "2018-09-18"
    },
    {
      "name": "Elijah Smith",
      "gender": "Male",
      "birthdate": "2020-12-05"
    }
  ]
  }
}

Test your JSON file in the browser and with the jsonlint.com or equivalent.

Submission

Update your course home page with a link to this JSON file.
Commit and push your changes to your wdd230 GitHub Pages enabled repository.