REST API with JavaScript in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this fetch call output in the console?

Consider this JavaScript code snippet in a WordPress theme fetching posts via REST API:

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => console.log(data.length))
  .catch(error => console.error('Error:', error));

What will be logged to the console if the site has 5 published posts?

Wordpress

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => console.log(data.length))
  .catch(error => console.error('Error:', error));

A undefined

B 5

C An error message

D 0

💡 Hint

Think about what the REST API returns and what data.length means.

The WordPress REST API returns an array of post objects. The data.length gives the number of posts fetched. Since there are 5 posts, it logs 5.

📝 Syntax

intermediate

Which option correctly fetches a single post by ID using async/await?

You want to fetch a post with ID 10 from the WordPress REST API using async/await syntax. Which code snippet is correct?

A

async function getPost() {
  const response = await fetch('https://example.com/wp-json/wp/v2/posts/10');
  const post = await response.json();
  return post;
}

B

async function getPost() {
  const response = fetch('https://example.com/wp-json/wp/v2/posts/10');
  const post = response.json();
  return post;
}

C

async function getPost() {
  const response = await fetch('https://example.com/wp-json/wp/v2/posts/10');
  const post = response.json();
  return post;
}

D

function getPost() {
  const response = await fetch('https://example.com/wp-json/wp/v2/posts/10');
  const post = await response.json();
  return post;
}

💡 Hint

Remember that await must be used with promises and inside async functions.

Option A correctly awaits both the fetch and the JSON parsing. Option A is not async but uses await, Option A misses awaits, and D misses awaiting response.json().

🔧 Debug

advanced

Why does this fetch call fail with a CORS error?

This code tries to fetch posts from a WordPress REST API but fails with a CORS error in the browser console:

fetch('https://anotherdomain.com/wp-json/wp/v2/posts')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

What is the most likely reason for the CORS error?

A The fetch method should be POST instead of GET.

B The fetch URL is incorrect and returns 404.

C The server at anotherdomain.com does not allow cross-origin requests from your site.

D The browser does not support fetch API.

💡 Hint

Think about browser security rules for cross-site requests.

CORS errors happen when the server does not send headers allowing your site to access its resources. The URL might be correct, and fetch supports GET by default. The browser supports fetch, so the issue is server-side CORS policy.

❓ state_output

advanced

What is the final state of posts after this React useEffect fetch?

In a React component, this code fetches posts and sets state:

const [posts, setPosts] = React.useState([]);

React.useEffect(() => {
  fetch('https://example.com/wp-json/wp/v2/posts')
    .then(res => res.json())
    .then(data => setPosts(data))
    .catch(() => setPosts([]));
}, []);

If the fetch succeeds and returns 3 posts, what will posts.length be after the effect runs?

Wordpress

const [posts, setPosts] = React.useState([]);

React.useEffect(() => {
  fetch('https://example.com/wp-json/wp/v2/posts')
    .then(res => res.json())
    .then(data => setPosts(data))
    .catch(() => setPosts([]));
}, []);

A 0

B undefined

C An error is thrown

D 3

💡 Hint

Consider what happens when the fetch is successful and how state updates.

The fetch returns an array of 3 posts, which is set as the new state. So posts.length becomes 3.

🧠 Conceptual

expert

Which HTTP method and header combination is required to create a new post via WordPress REST API with JavaScript?

You want to create a new post on a WordPress site using the REST API and JavaScript. Which HTTP method and header must you include in your fetch request?

A POST method with 'Content-Type: application/json' and an Authorization header with a valid token

B GET method with 'Accept: application/json' header only

C PUT method with no headers

D DELETE method with 'Content-Type: text/plain' header

💡 Hint

Think about how to send data securely and the method used to create resources.

Creating a post requires a POST request with JSON data, so the 'Content-Type: application/json' header is needed. Also, WordPress requires authentication, so an Authorization header with a valid token is necessary.