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.

Practice

1. What is the main purpose of using the WordPress REST API with JavaScript?

easy

A. To get or send data to the WordPress server without reloading the page

B. To change the WordPress theme colors

C. To install WordPress plugins automatically

D. To create new WordPress users manually

Solution

1. Step 1: Understand REST API role

   The REST API allows JavaScript to communicate with the server asynchronously.

2. Step 2: Identify the purpose in WordPress context

   It is used to get or send data like posts or pages without reloading the page.

3. Final Answer:

   To get or send data to the WordPress server without reloading the page -> Option A

4. Quick Check:

   REST API = Data exchange without reload [OK]

Hint: REST API means data exchange without page reload [OK]

Common Mistakes:

• Thinking REST API changes themes or plugins
• Confusing REST API with WordPress admin tasks
• Assuming REST API reloads the page

2. Which of the following is the correct way to fetch posts from the WordPress REST API using JavaScript?

easy

A. fetch('/wp-json/wp/v2/posts').then(response => response.json())

B. fetch('wp-json/wp/v2/posts').json()

C. fetch('/wp-json/wp/v2/posts').json()

D. fetch('/wp-json/wp/v2/posts').then(response => response.text())

Solution

1. Step 1: Check fetch URL format

   The URL must start with a slash '/' to indicate root path: '/wp-json/wp/v2/posts'.

2. Step 2: Use correct response method

   Use response.json() inside a then() to parse JSON data correctly.

3. Final Answer:

   fetch('/wp-json/wp/v2/posts').then(response => response.json()) -> Option A

4. Quick Check:

   fetch + .then + response.json() = correct syntax [OK]

Hint: Use .then(response => response.json()) after fetch [OK]

Common Mistakes:

• Missing leading slash in URL
• Calling .json() directly on fetch without then
• Using response.text() instead of response.json()

3. What will the following code output if the REST API returns two posts with titles 'Hello' and 'World'?

fetch('/wp-json/wp/v2/posts')
  .then(res => res.json())
  .then(posts => {
    posts.forEach(post => console.log(post.title.rendered));
  });

medium

A. undefined\nundefined

B. posts.forEach is not a function

C. Hello\nWorld

D. Error: Cannot read property 'rendered' of undefined

Solution

1. Step 1: Understand fetch and JSON parsing

   The fetch gets posts, then res.json() parses the JSON array of posts.

2. Step 2: Loop through posts and log titles

   posts.forEach logs each post's title.rendered, so it prints 'Hello' and 'World'.

3. Final Answer:

   Hello\nWorld -> Option C

4. Quick Check:

   posts.forEach + post.title.rendered = Hello and World [OK]

Hint: Use console.log inside forEach to print each post title [OK]

Common Mistakes:

• Assuming posts is not an array
• Forgetting to parse JSON with res.json()
• Accessing title without .rendered property

4. Identify the error in this code snippet that tries to fetch pages from WordPress REST API:

async function getPages() {
  const response = await fetch('wp-json/wp/v2/pages');
  const data = await response.json;
  console.log(data);
}

medium

A. The function should not be async

B. The fetch URL is missing a leading slash '/' and response.json is missing parentheses

C. console.log should be before fetch call

D. response.json should be replaced with response.text

Solution

1. Step 1: Check fetch URL format

   The URL 'wp-json/wp/v2/pages' is missing a leading slash '/' which is required for root-relative path.

2. Step 2: Check response.json usage

   response.json is a function and must be called with parentheses: response.json()

3. Final Answer:

   The fetch URL is missing a leading slash '/' and response.json is missing parentheses -> Option B

4. Quick Check:

   URL slash + response.json() needed [OK]

Hint: Always add '/' before REST API path and call .json() as function [OK]

Common Mistakes:

• Forgetting parentheses on response.json
• Missing leading slash in URL
• Misplacing console.log before data is fetched

5. You want to fetch posts and display only those with the word 'JavaScript' in the title using async/await. Which code correctly filters and logs these posts?

hard

A. async function fetchJSPosts() {
const res = await fetch('/wp-json/wp/v2/posts');
const posts = await res.text();
const filtered = posts.filter(post => post.title.rendered.includes('JavaScript'));
filtered.forEach(post => console.log(post.title.rendered));
}

B. async function fetchJSPosts() {
const res = await fetch('/wp-json/wp/v2/posts');
const posts = await res.json;
const filtered = posts.filter(post => post.title.includes('JavaScript'));
filtered.forEach(post => console.log(post.title.rendered));
}

C. async function fetchJSPosts() {
const res = await fetch('/wp-json/wp/v2/posts');
const posts = await res.json();
const filtered = posts.filter(post => post.title.rendered == 'JavaScript');
filtered.forEach(post => console.log(post.title.rendered));
}

D. async function fetchJSPosts() {
const res = await fetch('/wp-json/wp/v2/posts');
const posts = await res.json();
const filtered = posts.filter(post => post.title.rendered.includes('JavaScript'));
filtered.forEach(post => console.log(post.title.rendered));
}

Solution

1. Step 1: Correctly fetch and parse JSON

   Use await res.json() to parse the response as JSON array of posts.

2. Step 2: Filter posts by checking if title.rendered includes 'JavaScript'

   Use posts.filter with post.title.rendered.includes('JavaScript') to select matching posts.

3. Step 3: Log filtered post titles

   Use forEach to log each filtered post's title.rendered.

4. Final Answer:

   async function fetchJSPosts() { const res = await fetch('/wp-json/wp/v2/posts'); const posts = await res.json(); const filtered = posts.filter(post => post.title.rendered.includes('JavaScript')); filtered.forEach(post => console.log(post.title.rendered)); } -> Option D

5. Quick Check:

   await fetch + .json() + filter + includes = async function fetchJSPosts() { const res = await fetch('/wp-json/wp/v2/posts'); const posts = await res.json(); const filtered = posts.filter(post => post.title.rendered.includes('JavaScript')); filtered.forEach(post => console.log(post.title.rendered)); } [OK]

Hint: Use .json() and filter with includes() on title.rendered [OK]

Common Mistakes:

• Forgetting parentheses on json()
• Using == instead of includes for substring
• Parsing response as text instead of JSON