REST API with JavaScript in Wordpress - Step-by-Step Execution

Concept Flow - REST API with JavaScript

Start

↓

Create fetch request

↓

Send request to REST API

↓

Wait for response

↓

Check response status

↓

Parse JSON

↓

Use data

↓

End

This flow shows how JavaScript sends a request to a REST API, waits for the response, checks if it is successful, then parses and uses the data or handles errors.

Execution Sample

Wordpress

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

This code fetches posts from a WordPress REST API, converts the response to JSON, logs the data, and handles errors.

Execution Table

Step	Action	Evaluation	Result
1	Call fetch with URL	Request sent to https://example.com/wp-json/wp/v2/posts	Promise pending
2	Receive response	Response status 200 OK	Promise resolved with response
3	Call response.json()	Parse JSON body	Promise resolved with data array
4	Call console.log(data)	Output data to console	Data displayed in console
5	If error occurs	Catch block runs	Error message logged

💡 Fetch completes after data is logged or error is handled

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
response	undefined	Response object with status 200	undefined	undefined
data	undefined	undefined	Array of posts JSON	Array of posts JSON
error	undefined	undefined	undefined	Error object if any

Key Moments - 3 Insights

Why do we use .then() after fetch?

Because fetch returns a Promise, .then() waits for the response before continuing, as shown in steps 2 and 3 of the execution_table.

What happens if the API returns an error status?

The catch block runs to handle errors, as shown in step 5 of the execution_table, preventing the app from crashing.

Why do we call response.json()?

Because the response body is a stream, response.json() reads and parses it into usable JavaScript data, shown in step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of the fetch promise after step 1?

A Pending

B Resolved with data

C Rejected with error

D Undefined

💡 Hint

Check the 'Result' column in step 1 of the execution_table

At which step is the JSON data available to use?

A Step 1

B Step 3

C Step 2

D Step 5

💡 Hint

Look at the 'Evaluation' and 'Result' columns in the execution_table

If the API URL is wrong, which step will handle the problem?

A Step 2

B Step 4

C Step 5

D Step 3

💡 Hint

Refer to the 'Action' and 'Result' columns for error handling in the execution_table

Concept Snapshot

REST API with JavaScript:
- Use fetch('URL') to request data
- fetch returns a Promise
- Use .then() to wait for response
- Call response.json() to parse data
- Use .catch() to handle errors
- Data can then be used in your app

Full Transcript

This lesson shows how JavaScript talks to a REST API, like WordPress's API, using fetch. First, fetch sends a request to the API URL. Then it waits for the server to respond. When the response arrives, we check if it is successful. If yes, we convert the response to JSON format to get the data. We then use the data, for example, by showing it in the console. If there is an error at any point, we catch it and show an error message. This flow helps your app get data from servers safely and clearly.

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