Why WordPress REST API enables headless usage - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch posts using the WordPress REST API.

Wordpress

fetch('[1]/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => console.log(data));

Drag options to blanks, or click blank then click option'

Ahttps://example.com

Bfile://localhost

Cftp://example.com

Dhttp://localhost

Attempts:

3 left

💡 Hint

Common Mistakes

Using unsupported protocols like ftp or file.

Omitting the site URL before the API path.

The WordPress REST API endpoint starts with the site URL followed by /wp-json/wp/v2/posts to fetch posts.

2fill in blank

medium

Complete the code to display the title of the first post from the REST API response.

Wordpress

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(posts => console.log(posts[[1]].title.rendered));

Drag options to blanks, or click blank then click option'

A-1

B1

C0

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 as the first index, which skips the first post.

Using negative or invalid indexes.

Arrays in JavaScript start at index 0, so the first post is at posts[0].

3fill in blank

hard

Fix the error in the code to correctly fetch and log the post titles.

Wordpress

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => response.[1]())
  .then(posts => posts.forEach(post => console.log(post.title.rendered)));

Drag options to blanks, or click blank then click option'

Axml

Bjson

Ctext

Dhtml

Attempts:

3 left

💡 Hint

Common Mistakes

Using response.text() which returns raw text, not parsed JSON.

Using unsupported formats like XML or HTML.

The response must be converted to JSON using response.json() to access the data as JavaScript objects.

4fill in blank

hard

Fill both blanks to create a React component that fetches and displays post titles from the WordPress REST API.

Wordpress

import React, { useState, useEffect } from 'react';

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('[1]/wp-json/wp/v2/posts')
      .then(response => response.[2]())
      .then(data => setPosts(data));
  }, []);

  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title.rendered}</li>)}
    </ul>
  );
}

Drag options to blanks, or click blank then click option'

Ahttps://myblog.com

Btext

Cjson

Dhttp://api.example.com

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect URLs that don't point to the WordPress site.

Parsing response with text() instead of json().

The component fetches posts from the WordPress REST API URL and parses the response as JSON before setting state.

5fill in blank

hard

Fill all three blanks to create a JavaScript function that fetches posts, filters by category ID 5, and logs the titles.

Wordpress

async function fetchCategoryPosts() {
  const response = await fetch('[1]/wp-json/wp/v2/posts?categories=[2]');
  const posts = await response.[3]();
  posts.forEach(post => console.log(post.title.rendered));
}

Drag options to blanks, or click blank then click option'

Ahttps://site.example

B5

Cjson

D10

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong category IDs or missing the query parameter.

Not parsing the response as JSON.

Using incorrect URLs.

The function fetches posts from the WordPress REST API filtered by category ID 5 and parses the response as JSON.