Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Access deeply nested response fields safely.
Working with Nested JSON is easiest to learn by reading the example, changing it, and observing the result.
// Object -> JSON string (for request bodies)
const body = JSON.stringify({ title: 'AJAX', tags: ['fetch', 'json'] });
// JSON string -> object (from a response)
const text = '{"lesson":{"title":"AJAX","author":{"name":"Ada"}}}';
const data = JSON.parse(text);
console.log(data.lesson.author.name); // safe nested access
console.log(data.lesson?.missing?.field ?? 'n/a');Practice the Working with Nested JSON example in a small scratch file, then explain what changed and why.