WDD 230: Web Frontend Development I

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 ...

JSON syntax and data ...

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.

Activity Instructions

  1. Add a folder name "week05" to your wdd230 course repository.
  2. Add a new file named "new-ward-members.json" to the week05 folder.
  3. 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
  4. Test your JSON file in the browser and with the jsonlint.com or equivalent.

Submission

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