WDD 231 | JSON

JSON

Overview

JavaScript Object Notation or JSON is an open standard, simple data interchange format. JSON is often used for transmitting data between a server and a client application and can be used for configuration files and data storage.

"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 is:
- text-based,
- stored in 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,
- 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 structure, and
- does 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)
Video: Learn JSON in 10 Minutes

Activity Instructions

Create a JSON file that will hold new ward member information.
Populate this new JSON file with valid syntax using the following data requirements:
1. The family name
2. The date the family moved into the ward
3. Number of people in the family (number of records)
4. Visited by bishopric?
5. Individual family members
  1. Name
  2. Gender
  3. Birthdate
Test your JSON file in the browser and with the jsonlint.com or an equivalent validator/formatter.

Check Your Understanding

{
  "family_name": "Santos",
  "move_in_date": "2024-06-24",
  "number_of_people": 4,
  "visited_by_bishopric": true,
  "family_members": [
    {
      "name": "Pedro Santos",
      "gender": "Male",
      "birthdate": "1990-05-15"
    },
    {
      "name": "Maria Santos",
      "gender": "Female",
      "birthdate": "1992-08-20"
    },
    {
      "name": "Andrea Santos",
      "gender": "Female",
      "birthdate": "2010-03-05"
    },
    {
      "name": "Luz Santos",
      "gender": "Male",
      "birthdate": "2012-11-10"
    }
  ]
}