API Practice Problems

HCDD 411

20 problems — from guided to independent

🟢 Easy (1–5)

Step-by-step TODOs. Every line is scaffolded for you.

🔵 Easy-Medium (6–10)

Less scaffolding. A few hints to point you in the right direction.

🟡 Medium (11–15)

Minimal hints. You're mostly on your own — think it through.

🔴 Medium-Hard (16–20)

No scaffolding. Multi-step problems that combine concepts.

All examples use: https://jsonplaceholder.typicode.com — a free fake REST API, perfect for practice.

Problem 1 of 20

🟢 Easy

Fetch a User's Name

Your Task:

Use fetch() to GET user #1 from the API
Parse the JSON response
Log the user's name to the console

PRACTICE 1: Fetch GET – user name

// URL to use: "https://jsonplaceholder.typicode.com/users/1"

async function getUserName() {
  try {
    // Step 1: Fetch the URL (await the fetch call)
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");

    // Step 2: Parse the JSON (await response.json())
    const user = await response.json();

    // Step 3: Log the user's name
    // console.log("Name:", ???);

  } catch (error) {
    console.error("Error:", error.message);
  }
}

getUserName();

Ln 1, Col 1 JavaScript

💻 Console Output:

Hints:

Replace ??? with user.name
Expected output: Leanne Graham

Problem 2 of 20

🟢 Easy

Parse a JSON String

Your Task:

Use JSON.parse() to convert the string below into a JS object
Log the title and userId fields
Then use JSON.stringify() to convert the object back to a string and log it

PRACTICE 2: JSON.parse + JSON.stringify

const raw = '{"userId":1,"id":42,"title":"Hello World","completed":false}';

// Step 1: Parse the JSON string into a JS object
// const obj = JSON.parse(???);

// Step 2: Log the title and userId
// console.log("Title:", ???);
// console.log("User ID:", ???);

// Step 3: Stringify the object back and log it
// const backToString = JSON.stringify(???);
// console.log("As string:", backToString);

Ln 1, Col 1 JavaScript

💻 Console Output:

Hints:

JSON.parse(raw) → turns a string into an object
JSON.stringify(obj) → turns an object back into a string
Access properties with dot notation: obj.title, obj.userId

Problem 3 of 20

🟢 Easy

jQuery AJAX — Fetch a Post

Your Task:

Use $.ajax() to GET post #5 from the API
In the success callback, log the post's title
Add an error callback that logs "Request failed"

PRACTICE 3: $.ajax GET

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/5",
  method: "GET",         // HTTP method

  success: function(data) {
    // Step 1: log the post title
    // console.log("Post title:", ???);
  },

  error: function(xhr, status, err) {
    // Step 2: log "Request failed"
    // console.error(???);
  }
});

Ln 1, Col 1 JavaScript

💻 Console Output:

Hints:

Inside success, the parsed object arrives as data
The title field is data.title
Expected output: nesciunt quas odio

Problem 4 of 20

🟢 Easy

Fetch a User's Email

Your Task:

Fetch user #3 from the API
Log both their name and email
Add proper error handling with if (!response.ok)

PRACTICE 4: Fetch GET – name + email

async function getUserInfo() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users/3");

    // Check if the request succeeded — throw if not
    if (!response.ok) {
      throw new Error("HTTP " + response.status);
    }

    // Parse the JSON
    const user = await response.json();

    // Log name and email
    // console.log("Name:", ???);
    // console.log("Email:", ???);

  } catch (error) {
    console.error("Error:", error.message);
  }
}

getUserInfo();

Ln 1, Col 1 JavaScript

💻 Console Output:

Hints:

Replace ??? with user.name and user.email
Expected name: Clementine Bauch

Problem 5 of 20

🟢 Easy

Fetch a Todo — async/await

Your Task:

Use async/await with Fetch to GET todo #7
Log the title and whether it is completed

PRACTICE 5: async/await – todo

// URL: "https://jsonplaceholder.typicode.com/todos/7"

async function getTodo() {
  try {
    // Fetch the todo and parse it in two steps
    const response = await fetch(???);
    if (!response.ok) throw new Error("HTTP " + response.status);
    const todo = await response.json();

    // Log title and completed status
    console.log("Title:", todo.title);
    console.log("Completed:", ???);

  } catch (error) {
    console.error("Error:", error.message);
  }
}

getTodo();

Ln 1, Col 1 JavaScript

💻 Console Output:

Hints:

Fill in the URL string and replace ??? with todo.completed
Expected output: illo expedita consequatur quia in, Completed: false

Problem 6 of 20

🔵 Easy-Medium

Count All Posts

Your Task:

Fetch all posts from /posts (no ID — returns an array)
Log the total number of posts using .length
Also log the title of the first post in the array

PRACTICE 6: Fetch array + count

async function countPosts() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    if (!response.ok) throw new Error("HTTP " + response.status);
    const posts = await response.json();

    // posts is an array — log its length and the first post's title
    // Your code here:

  } catch (error) {
    console.error("Error:", error.message);
  }
}

countPosts();

Ln 1, Col 1 JavaScript

💻 Console Output:

Hint: Arrays have a .length property. Access index 0 with posts[0].title. Expected total: 100.

Problem 7 of 20

🔵 Easy-Medium

jQuery AJAX — Create a Post

Your Task:

Use $.ajax() with method: "POST" to create a new post
Send a JSON body with title, body, and userId fields
Log the id of the newly created post from the response

PRACTICE 7: $.ajax POST

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts",
  method: "POST",
  contentType: "application/json",
  data: JSON.stringify({
    title:  "My Practice Post",
    body:   "Learning APIs is fun!",
    userId: 1
  }),

  success: function(data) {
    // Log the id of the created post
    // Your code here:

  },

  error: function(xhr, status, err) {
    console.error("POST failed:", err);
  }
});

Ln 1, Col 1 JavaScript

💻 Console Output:

Hint: The API returns the new post object. The fake server always returns id: 101 for a POST to /posts.

Problem 8 of 20

🔵 Easy-Medium

Fetch POST with Headers

Your Task:

Use fetch() with method: "POST"
Include the correct Content-Type header
Send a JSON-serialized body using JSON.stringify()
Log the returned id and title

PRACTICE 8: Fetch POST + headers

async function createPost() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      headers: {
        // Add the Content-Type header here
      },
      body: JSON.stringify({
        title:  "HCDD 411 Practice",
        body:   "Fetch POST with headers",
        userId: 5
      })
    });

    if (!response.ok) throw new Error("HTTP " + response.status);
    const post = await response.json();

    // Log id and title
    // Your code here:

  } catch (error) {
    console.error("Error:", error.message);
  }
}

createPost();

Ln 1, Col 1 JavaScript

💻 Console Output:

Hint: The Content-Type header value is "application/json". Write it as "Content-Type": "application/json" inside the headers object.

Problem 9 of 20

🔵 Easy-Medium

Axios GET — User Details

Your Task:

Use axios.get() to fetch user #4
Log the user's name, phone, and website
Remember: with Axios the data lives in response.data, not response directly

PRACTICE 9: Axios GET – user details

axios.get("https://jsonplaceholder.typicode.com/users/4")
  .then((response) => {
    // With Axios, data is in response.data
    const user = response.data;

    // Log name, phone, website
    // Your code here:

  })
  .catch((error) => {
    console.error("Error:", error.message);
  });

Ln 1, Col 1 JavaScript

💻 Console Output:

Hint: Fields are user.name, user.phone, user.website. Expected name: Patricia Lebsack.

Problem 10 of 20

🔵 Easy-Medium

Filter Completed Todos

Your Task:

Fetch all todos from /todos
Filter the array to only keep todos where completed === true
Log how many completed todos there are and the title of the first one

PRACTICE 10: Fetch + array filter

async function getCompletedTodos() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos");
    if (!response.ok) throw new Error("HTTP " + response.status);
    const todos = await response.json();

    // Filter: keep only todos where completed is true
    // Hint: todos.filter(todo => todo.completed === true)
    const done = // Your code here

    console.log("Completed count:", done.length);
    console.log("First completed title:", done[0].title);

  } catch (error) {
    console.error("Error:", error.message);
  }
}

getCompletedTodos();

Ln 1, Col 1 JavaScript

💻 Console Output:

Hint: Array.filter() returns a new array with only the items that pass the condition. Expected completed count: 90.

Problem 11 of 20

🟡 Medium

Chain Two Requests — User → Posts

Your Task:

Fetch user #2
Using the user's id, fetch all posts by that user: /posts?userId=<id>
Log the user's name and how many posts they have

PRACTICE 11: Chained requests

async function fetchJson(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

async function userPostCount() {
  try {
    // Step 1: get user 2
    const user = await fetchJson("https://jsonplaceholder.typicode.com/users/2");

    // Step 2: get posts for that user using user.id
    const posts = await fetchJson(/* build the URL using user.id */);

    // Step 3: log results
    console.log("User:", user.name);
    console.log("Number of posts:", posts.length);

  } catch (error) {
    console.error("Error:", error.message);
  }
}

userPostCount();

Ln 1, Col 1 JavaScript

💻 Console Output:

Hint: Build the URL like: "...typicode.com/posts?userId=" + user.id. Expected: Ervin Howell, 10 posts.

Problem 12 of 20

🟡 Medium

Search Users by Name

Your Task:

Fetch all users from /users
Filter by a keyword — keep only users whose name contains "ch" (case-insensitive)
Log each matching user's name and email

PRACTICE 12: Filter by name keyword

const keyword = "ch";

async function searchUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    if (!response.ok) throw new Error("HTTP " + response.status);
    const users = await response.json();

    // Filter users whose name includes the keyword (case-insensitive)
    const k = keyword.toLowerCase();
    const matches = users.filter(/* your condition here */);

    // Log each match
    matches.forEach(user => {
      // Your code here
    });

    console.log("Total matches:", matches.length);

  } catch (error) {
    console.error("Error:", error.message);
  }
}

searchUsers();

Ln 1, Col 1 JavaScript

💻 Console Output:

Hint: Use user.name.toLowerCase().includes(k) as the filter condition.

Problem 13 of 20

🟡 Medium

Axios POST — Create a Comment

Your Task:

Use axios.post() to create a new comment on post 1
The body should include: postId, name, email, body
Log the full response object that comes back

PRACTICE 13: Axios POST – comment

// Send a POST to: "https://jsonplaceholder.typicode.com/comments"
// Body fields: postId, name, email, body

// Your code here — use axios.post() with .then() and .catch()

Ln 1, Col 1 JavaScript

💻 Console Output:

Hint: Axios syntax: axios.post(url, bodyObject). The response data is at response.data. No need to call JSON.stringify() — Axios handles that.

Problem 14 of 20

🟡 Medium

Three-Step Chain — Post → Comments → Count

Your Task:

Fetch post #3
Then fetch all comments for that post: /comments?postId=<id>
Log the post title, and how many comments it has
Also log the email of the first commenter

PRACTICE 14: 3-step chain

// Use the fetchJson helper from earlier

async function fetchJson(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

async function postComments() {
  try {
    // Your three-step logic here

  } catch (error) {
    console.error("Error:", error.message);
  }
}

postComments();

Ln 1, Col 1 JavaScript

💻 Console Output:

Problem 15 of 20

🟡 Medium

Promise Chain (no async/await)

Your Task:

Fetch user #5 using only .then() and .catch() — no async/await
In the first .then(), check response.ok and call response.json()
In the second .then(), log the user's name and company name (user.company.name)

PRACTICE 15: Pure .then() chain

// Write this using ONLY .then() / .catch() — no async/await allowed

fetch("https://jsonplaceholder.typicode.com/users/5")
  .then((response) => {
    // check response.ok, then return response.json()
  })
  .then((user) => {
    // log user.name and user.company.name
  })
  .catch((error) => {
    console.error("Error:", error.message);
  });

Ln 1, Col 1 JavaScript

💻 Console Output:

Problem 16 of 20

🔴 Medium-Hard

Reusable Helper + User Albums

Your Task:

Write a reusable fetchJson(url) async helper function
Use it to: fetch user #1, then fetch all albums for that user (/albums?userId=<id>)
Log the user's name, total albums, and the title of every album

PRACTICE 16: Custom helper + chained data

// Write everything from scratch — no scaffolding this time.
// Endpoints:
//   User:   https://jsonplaceholder.typicode.com/users/1
//   Albums: https://jsonplaceholder.typicode.com/albums?userId=<id>

// Your code here

Ln 1, Col 1 JavaScript

💻 Console Output:

No hints. You have all the pieces from the earlier problems. Put them together.

Problem 17 of 20

🔴 Medium-Hard

Parallel Requests with Promise.all

Your Task:

Fetch users #1 and #2 at the same time using Promise.all()
Only after both resolve, log both users' names side by side
Add error handling — if either fails, log the error

PRACTICE 17: Promise.all – parallel fetches

// Promise.all takes an array of Promises and resolves when ALL complete.
// Syntax: const [result1, result2] = await Promise.all([promise1, promise2]);
//
// Endpoints:
//   https://jsonplaceholder.typicode.com/users/1
//   https://jsonplaceholder.typicode.com/users/2

// Your code here

Ln 1, Col 1 JavaScript

💻 Console Output:

Problem 18 of 20

🔴 Medium-Hard

Full Pipeline — User → Posts → Comments

Your Task:

Fetch user #1
Then fetch all posts by that user
Then, for the first post only, fetch its comments
Log: user name, first post title, comment count, and all commenter emails

PRACTICE 18: 3-resource pipeline

// Endpoints:
//   User:     /users/1
//   Posts:    /posts?userId=<id>
//   Comments: /comments?postId=<id>

// Your code here

Ln 1, Col 1 JavaScript

💻 Console Output:

Problem 19 of 20

🔴 Medium-Hard

POST then Verify — Create & Echo

Your Task:

Create a new post using a POST request
Log the id returned by the server
Then immediately make a second GET request to /posts/1 to read an existing post
Log both: "Created ID" from the POST, and "Verified title" from the GET
All of this inside one async function with proper error handling

PRACTICE 19: POST then GET

// Your code here
// POST to:  https://jsonplaceholder.typicode.com/posts
// GET from: https://jsonplaceholder.typicode.com/posts/1

Ln 1, Col 1 JavaScript

💻 Console Output:

Problem 20 of 20

🔴 Medium-Hard

Graceful Error Handling + Retry

Your Task:

Write an async function fetchWithRetry(url, retries)
It should try to fetch the URL up to retries times
If a fetch attempt throws, log "Attempt N failed" and try again
If all attempts fail, log "All attempts failed"
Test it by calling it with a bad URL first, then with a good one

PRACTICE 20: Retry logic

async function fetchWithRetry(url, retries = 3) {
  // Your logic here:
  // Loop up to `retries` times
  // On each attempt, try to fetch and parse JSON
  // If it throws, log the failure and continue the loop
  // After the loop, log "All attempts failed"
}

// Test with bad URL (should fail all retries)
fetchWithRetry("https://jsonplaceholder.typicode.com/NOTREAL/999", 2);

// Test with good URL (should succeed)
fetchWithRetry("https://jsonplaceholder.typicode.com/posts/1", 3)
  .then(data => data && console.log("Success:", data.title));

Ln 1, Col 1 JavaScript

💻 Console Output:

Challenge: The fake API returns 200 even for unknown resources. Use if (!res.ok) throw new Error(...) inside your loop to force a real failure, then test with a valid endpoint to confirm success.