8 - Introduction to JSON and Using It in the Browser — Topics & Learning Outcomes

Module Topics

What is JSON?

• Definition of JSON — JSON stands for JavaScript Object Notation, a lightweight text-based format for representing structured data.
• Purpose of JSON — JSON is designed primarily to serve as a data interchange format, allowing different systems and applications to exchange information in a common structure.
• JSON Structure and Syntax — JSON data is organized as key-value pairs (objects) or ordered lists (arrays), following a strict but simple set of syntax rules.
• Why JSON is Widely Used on the Web — JSON has become the dominant data format for web APIs and browser-server communication due to its simplicity, readability, and native compatibility with JavaScript.
• JSON vs. JavaScript Objects — While JSON looks very similar to a JavaScript object literal, the two are distinct: JSON is a text string, whereas a JavaScript object is a live, in-memory data structure.

JSON Syntax and Structure

• What Is JSON? — JSON (JavaScript Object Notation) is a lightweight, text-based data format used to represent structured data.
• JSON Data Types — JSON supports a limited but versatile set of data types that can be used as values within a JSON structure.
• JSON Objects — A JSON object is an unordered collection of key-value pairs enclosed in curly braces {}.
• JSON Arrays — A JSON array is an ordered list of values enclosed in square brackets [].
• JSON Formatting Conventions — Valid JSON must follow strict formatting rules that differ from relaxed JavaScript object syntax.
• Nested Structures in JSON — JSON's true power lies in its ability to represent complex, hierarchical data through nesting of objects and arrays.

Parsing JSON in JavaScript

• What Is JSON Parsing? — Parsing JSON means converting a JSON-formatted string into a native JavaScript object that your code can work with directly.
• Using JSON.parse() — The built-in JSON.parse() method is the standard way to convert a valid JSON string into a JavaScript object or array.
• Valid JSON Requirements Before Parsing — JSON.parse() will only succeed if the input string is strictly valid JSON, which follows slightly different rules than JavaScript object literals.
• Handling Errors with try...catch — If JSON.parse() receives an invalid JSON string, it throws a SyntaxError, so wrapping it in a try...catch block is essential for robust code.
• Parsing JSON Arrays — JSON strings can represent arrays at the top level, and JSON.parse() handles these just as naturally as it handles objects.
• Using the Reviver Function — JSON.parse() accepts an optional second argument called a reviver function, which lets you transform parsed values as they are being built.

Stringifying JavaScript Objects to JSON

• What Is JSON.stringify()? — JSON.stringify() is a built-in JavaScript method that converts a JavaScript object or value into a JSON-formatted string.
• Basic Syntax and Parameters — JSON.stringify() accepts up to three arguments: the value to convert, an optional replacer, and an optional space parameter for formatting.
• When Stringification Is Needed in Web Development — Stringifying JavaScript objects is required whenever you need to send data from the browser to a server or store structured data as text.
• How JSON.stringify() Handles Different Data Types — Not all JavaScript values are represented the same way — or at all — when converted to a JSON string.
• Using the Replacer to Control Output — The replacer parameter gives you fine-grained control over which properties are included when stringifying an object.
• Pretty-Printing JSON with the Space Argument — The optional third argument to JSON.stringify() formats the output with indentation, making it human-readable.

Fetching JSON Data with the Fetch API

• Introduction to the Fetch API — The Fetch API is a modern, promise-based interface built into browsers that allows JavaScript to make HTTP requests to servers or external URLs.
• Making a Basic Fetch Request — Calling fetch() with a URL initiates an HTTP GET request and returns a Promise that you must handle to access the response data.
• Parsing the JSON Response — The Response object returned by fetch() provides a .json() method that reads the response body and parses it as JSON, returning another Promise.
• Using async/await with Fetch — The async/await syntax provides a cleaner, more synchronous-looking way to write fetch requests and handle JSON responses.
• Handling Errors in Fetch Requests — The Fetch API only rejects its Promise for network-level failures; HTTP error statuses like 404 or 500 must be checked manually.
• Displaying Fetched JSON Data in the Browser — Once the JSON response is parsed into a JavaScript object, you can use DOM manipulation methods to render the data dynamically on the web page.

Fetching JSON Data with XMLHttpRequest

• What is XMLHttpRequest? — XMLHttpRequest (XHR) is a built-in browser object that allows JavaScript to make HTTP requests to servers without reloading the page.
• Creating and Opening an XHR Request — To use XMLHttpRequest, you first create a new instance of the object and then call its open() method to configure the request type and target URL.
• Sending the Request and Handling the Response — After configuring the request with open(), you call the send() method to dispatch it, and use the onload event handler to process the server's response.
• Parsing JSON from the XHR Response — Because XHR returns the response as a plain string, you must explicitly use JSON.parse() to convert the JSON text into a JavaScript object or array.
• Error Handling with XMLHttpRequest — XMLHttpRequest provides the onerror event handler to catch network-level failures, and status code checks to detect server-side errors.
• XHR vs. the Fetch API: Context and Legacy Use — While the Fetch API is the modern standard for making HTTP requests in the browser, understanding XMLHttpRequest is essential for working with legacy code and older browser environments.

Displaying JSON Data in a Web Page

• Selecting DOM Elements as Render Targets — Before injecting JSON data into a page, you must identify and select the HTML elements that will serve as containers for the rendered content.
• Parsing Fetched JSON into a JavaScript Object — Raw JSON received from a server is a string and must be converted into a JavaScript object before its properties can be accessed for rendering.
• Building HTML Strings from JSON Data — One straightforward technique for rendering JSON data is constructing an HTML string dynamically and assigning it to an element's innerHTML property.
• Creating and Appending DOM Nodes Programmatically — A safer alternative to innerHTML is to create individual DOM nodes with JavaScript and append them to the document, avoiding direct HTML string injection.
• Iterating Over JSON Arrays to Generate Repeated Elements — JSON responses often contain arrays of objects; looping over these arrays allows you to generate a corresponding set of HTML elements for each record.
• Updating the DOM Dynamically After Data Changes — When JSON data is refreshed or filtered, the existing rendered content must be cleared and replaced to keep the UI in sync with the current data.

Student Learning Outcomes

By the end of this module, students will be able to:

Course Outcomes (reference)

No course outcomes have been defined.