Send asynchronous browser requests with fetch, XMLHttpRequest, JSON, errors, and progressive UI.
Lessons
Render lists and cards from arrays of data.
Templating Response Data is easiest to learn by reading the example, changing it, and observing the result.
async function showLessons() {
const response = await fetch('/api/lessons');
const lessons = await response.json();
const list = document.querySelector('#list');
list.innerHTML = lessons
.map(lesson => `<li>${lesson.title}</li>`)
.join('');
}
showLessons();Practice the Templating Response Data example in a small scratch file, then explain what changed and why.