JAVASCRIPT Free Section Starter Challenge 35 min

5. Live Fetch API, Async/Await & JSON Parsing

Overview: Fetch dynamic data over HTTP using async/await, check response status, and extract JSON payloads.

Concept & Syntax Guide

Modern web apps rely on asynchronous data fetching. Using `async/await` syntax provides clean synchronous-looking control flow over asynchronous Promises returned by `fetch()`.

Hands-On Practice Exercise

Build an Asynchronous Template Loader

Declare an `async` function `fetchMarketplaceStats()` that returns an object with `templates: 20`. Call the function and console.log the template count.

Target Output: Available Templates: 20

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: Available Templates: 20

JAVASCRIPT Code Editor

1
2
3
4
5
6
7
8
9
10

// Write your async function below
async function fetchMarketplaceStats() {
  return { templates: 20, rating: 4.9, activeUsers: 14200 };
}

fetchMarketplaceStats().then(stats => {
  console.log('Available Templates: ' + stats.templates);
});