Concepts / Parsing JSON in Your Application

Parsing JSON in Your Application

JSON uses two main structures: objects (key-value pairs in curly braces) and arrays (ordered lists in square brackets).

  • Programming

From Text to Data

When an application receives information from a web service, database, or another system, that information may be represented as JSON. JSON is a lightweight, text-based format for encoding and exchanging data. Its structure is built from two main forms: objects and arrays. Learning to read those forms lets you follow how information is organized before an application uses it.

readorganizeJSON textobjects and arraysParsingstructure is interpretedUsable dataobjects and arrays
How does JSON text move from an exchanged message to structures an application can use?

The Two JSON Structures

A JSON object is a collection of key-value pairs enclosed in curly braces. An object describes named properties, such as the name, phone, or email information associated with one entity. A JSON array is an ordered list enclosed in square brackets. An array represents a collection in which the position of each item matters.

containscontainsObject{ }Named propertieskey-value pairsArray[ ]Ordered itemscollection
How can you tell whether a JSON value is an object or an array, and what does each structure organize?
StructureDelimitersOrganizesTypical purpose
ObjectCurly bracesKey-value pairsNamed properties of one entity
ArraySquare bracketsOrdered valuesA collection of similar items

The delimiters provide the first visual clue about a JSON value's structure.

Following Key-Value Pairs

A key-value pair connects a property name to the data stored for that property. In JSON, the key must be a string written in double quotes, and a colon separates the key from its value. Commas separate multiple key-value pairs inside an object.

maps tomaps tomaps tonamekeyAveryvaluephonekeyObjectvalueemailkeyObjectvalue
How does each key connect to its corresponding value inside a JSON object?

Reading an Object

Consider this JSON object: { "name": "Avery", "phone": { "type": "mobile", "number": "555-0100" }, "email": { "hide": false } }

Find the outer delimiters: The outer curly braces show that the top-level value is an object.

Separate the top-level pairs: The object has three keys: name, phone, and email. Commas separate these pairs.

Read simple values: The value for name is the string Avery.

Inspect nested values: The values for phone and email are objects rather than simple strings. The phone object contains type and number. The email object contains hide.

The outer object represents one entity with three named properties, two of which contain additional objects.

Reading Nested Paths

Nesting means that one JSON value appears inside another. An object can contain another object or an array, and an array can contain objects. To read a deeply nested value, begin at the outer structure and follow one key or array item at a time. Each step narrows the path to the value you want.

containscontainscontainscontainscontactobjectphoneobjectnumber555-0100mobileitemtagsarray
What contains what when objects and arrays are nested, and how can you follow the path to a deeply nested value?

Tracing a Nested Value

Consider this JSON object: { "profile": { "contact": { "email": "learner@example.test" } } }

Start at the outer object: The outer curly braces identify the top-level object.

Follow profile: The key profile leads to another object.

Follow contact: Inside profile, the key contact leads to another object.

Read email: Inside contact, the key email leads to the string learner@example.test.

The nested path is profile, then contact, then email. The final value is learner@example.test.

Objects Inside Arrays

Arrays are useful when the data is a collection of similar items. Because an array is ordered, its items are read according to their positions. Each item can itself be an object, which allows a collection to contain several records with the same kind of named properties.

nextnextAveryposition 1Jordanposition 2Morganposition 3
How does the position of each item determine the order in which an array's data is read?

For example, an array can hold several objects representing people. Each object may have keys such as name and email, while the array preserves the collection's order. When reading such data, first recognize the array, then inspect one object at a time and follow that object's keys.

Syntax Signals

{starts object"name"string key:separates key and value"Avery"string value,separates pairs}ends object
What role does each punctuation mark play in a JSON object?

The most useful syntax clues are the delimiters and separators. Curly braces surround objects, square brackets surround arrays, a colon separates each key from its value, and commas separate items or key-value pairs. Object keys use double-quoted strings. JSON values may be strings, numbers, booleans, null, objects, or arrays.

Common Reading Errors

  • Treating every JSON value as a simple piece of text

    A value can itself be an object or an array, so its internal structure must be read before its contents are interpreted.

    Fix: Inspect the value's delimiters and follow its nested keys or ordered items.

  • Confusing an object with an array

    Curly braces indicate key-value pairs, while square brackets indicate an ordered list.

    Fix: Use the opening delimiter as the first structural clue: { begins an object and [ begins an array.

  • Using an unquoted object key

    JSON object keys must be strings in double quotes.

    Fix: Write every object key inside double quotation marks.

  • Losing track of the nesting path

    A nested value belongs to the object or array that contains it.

    Fix: Record each key or array item in order from the outermost structure to the target value.

Guided Practice

MEDIUM

Study this JSON value: { "customers": [ { "name": "Avery", "email": "a@example.test" }, { "name": "Jordan", "email": "j@example.test" } ] }. Identify the top-level structure, the value associated with customers, and the path to the email value for Jordan.

Hints
  • Look at the outermost delimiters first.
  • The value of customers begins with a square bracket.
  • Follow customers to the second object, then follow its email key.

What do you think happens?

Before checking the explanation, decide whether the value of customers is an object or an array.

  • Object
  • Array
Reveal answer

Answer: Array

The value begins with a square bracket and contains ordered items. Each item in this example is an object.

The path to Jordan's email is customers, then the second item in the array, then email. The top-level value is an object because it is enclosed in curly braces. Its customers key maps to an array, and the array contains objects with named properties.

Key Takeaways

  1. Objects use curly braces and organize named key-value pairs.
  2. Arrays use square brackets and organize ordered lists of values.
  3. JSON object keys must be strings in double quotes.
  4. Values can be strings, numbers, booleans, null, objects, or arrays.
  5. To read nested JSON, start at the outer structure and follow each key or array item along the path.

Key Takeaways

  • JSON represents exchanged data with objects and arrays.
  • Objects connect quoted keys to values, while arrays preserve ordered items.
  • Nested objects and arrays create hierarchical data that must be followed step by step.
  • Curly braces, square brackets, colons, commas, and double quotation marks provide essential syntax clues.
  • Parsing allows an application to interpret JSON text as organized data.