Project 3: API Data Viewer

Fetch & Display API Data

Put your async/await skills to the test! Fetch real data from a public API, handle loading states, catch errors gracefully, and display the results clearly.

YOUR TASK

Build an API data viewer that:

Uses fetch() with async/await to call a public API (use https://jsonplaceholder.typicode.com/users)
Logs "Loading..." before the fetch starts
Loops through the results and prints each user's name and email
Prints a total count: "Fetched X users"
Wraps everything in a try/catch block — log "Error fetching data" if it fails
Has a separate displayUsers(users) function to keep logic clean

The checker will verify your code uses async/await, try/catch, and proper output formatting.

Need a hint?

Structure to follow:
1. async function fetchUsers() {'{'}
2.   Log "Loading..."
3.   const res = await fetch('https://jsonplaceholder.typicode.com/users');
4.   const users = await res.json();
5.   Call displayUsers(users)
6.   Log "Fetched " + users.length + " users"
7. {'}'} catch(e) {'{'} console.log("Error fetching data"); {'}'}
8. Write function displayUsers(users) using a forEach loop

Expected output:

Loading...
1. Leanne Graham — Sincere@april.biz
2. Ervin Howell — Shanna@melissa.tv
3. Clementine Bauch — Nathan@yesenia.net
...
Fetched 10 users

Language:

Input:

Code Editor Ready

Output

Console

Console initialized...
Ready for Project 3: API Data Viewer

> Note: Judge0 supports fetch() — your async code will run live!
> Hit "Check My Code" when ready.