Parsing JSON in JavaScript

Introduction

JSON (JavaScript Object Notation) is a text format for representing structured data. When data arrives from a web API, a configuration file, or browser storage, it arrives as a string — not as a usable JavaScript object. Parsing is the step that bridges that gap: JSON.parse() reads a JSON-formatted string and returns the corresponding JavaScript value, whether that is an object, an array, a number, a string, a boolean, or null.

Because parsing depends entirely on the input being well-formed, this topic also covers what counts as valid JSON: double-quoted keys and strings, no trailing commas, no comments, no functions or undefined values, and correct nesting of objects and arrays. When the string is malformed, JSON.parse() throws a SyntaxError, so wrapping the call in try...catch is the standard defensive pattern. You will also meet the optional second argument to JSON.parse(), the reviver function, which lets you transform values as they are read — for example, converting an ISO date string into a real Date object.

As you watch, pay attention to three things: the distinction between a JSON string and a live JavaScript object, exactly which characters make a string invalid, and how parsed arrays can then be looped over with ordinary JavaScript. These habits carry directly into the fetch-and-render work later in this module.

Video 1: Demo: JavaScript Object Notation (JSON) [42 of 51] | JavaScript for Beginners

Microsoft Developer · 6:31 · 4,477 views · 5y ago · captions — Watch on YouTube

About this video

The companion demo episode to the previous video, showing JSON in actual code rather than in the abstract. Expect to see objects built and described in JSON notation on screen, with the instructor walking through the syntax line by line.

Why this video

Seeing JSON written and used in a live editor reinforces the object-versus-string distinction that JSON.parse() depends on, and the demo format makes the syntax rules concrete.

Video 2: JavaScript Object Notation (JSON) [41 of 51] | JavaScript for Beginners

Microsoft Developer · 4:29 · 5,809 views · 5y ago · captions — Watch on YouTube

About this video

A short conceptual lesson from Microsoft's JavaScript for Beginners series introducing JSON as a notation for creating and describing objects in JavaScript. Based on its title and description, it explains what JSON is, how its syntax relates to JavaScript object literals, and why the format is so widely used for exchanging data.

Why this video

It gives you the vocabulary and mental model you need before parsing makes sense, and it comes from Microsoft Developer's structured beginner curriculum, so the explanation is concise and reliable.

Video 3: Day 3 | JSON.parse() Explained with Valid Data Types | JSON Tutorial

Veer - the developer · 17:30 · 79 views · 5mo ago · captions — Watch on YouTube

About this video

A focused, longer tutorial dedicated specifically to JSON.parse() and the data types that are valid inside JSON. As part of a multi-day JSON course series, it works through what the method accepts and returns, and which values are and are not legal in a JSON document.

Why this video

This is the most direct match for the core subtopics — the mechanics of JSON.parse() and the validity requirements that determine whether parsing succeeds or throws — and its length allows for worked examples rather than a quick overview.

How These Videos Support the Learning Outcomes

Together these videos build from format to function. The two Microsoft Developer episodes establish JSON syntax, supported types, and structure, supporting MO1, while also making clear how a JSON representation differs from a native JavaScript object (MO2). The JSON.parse() tutorial addresses MO2 directly by demonstrating the conversion from string to object and the data types that conversion permits, and the error-handling and array-parsing practices discussed in this topic prepare you for MO3 and MO5, where you will parse a fetched response, catch failures gracefully, and iterate over the resulting array to update the DOM.

About These Videos

These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.