API Integration for Front-End Developers: A Practical Guide to Connecting Interfaces and Data

📘 Chapter 4: Building Real-World Features with APIs

🧭 What You’ll Learn

In this hands-on chapter, you will learn to:

• Build real-world features that use APIs for dynamic content
• Use APIs to display lists, submit forms, and handle pagination
• Create search bars with query parameters
• Manage loading states, errors, and user feedback
• Work with multiple endpoints and HTTP methods
• Improve UX with debounced searches, spinners, and success messages

🛠 Real-World Feature #1: Fetching and Displaying a List (Posts Example)

One of the most common use cases of an API is fetching and displaying a list of items such as blog posts, products, or users.

📌 Fetching Posts with fetch()

js

async function loadPosts() {

  try {

    const res = await fetch('https://jsonplaceholder.typicode.com/posts');

    const data = await res.json();

    renderPosts(data.slice(0, 10));

  } catch (error) {

    console.error('Error loading posts:', error);

  }

}

function renderPosts(posts) {

  const container = document.getElementById('postList');

  container.innerHTML = posts.map(post => `

    <div class="post">

      <h3>${post.title}</h3>

      <p>${post.body}</p>

    </div>

  `).join('');

}

🧱 HTML Structure

html

<div id="postList"></div>

<button onclick="loadPosts()">Load Posts</button>

✍️ Real-World Feature #2: Submitting a Form (Create Post)

Let’s allow users to submit data using a POST request.

📘 HTML Form

html

<form id="createForm">

  <input type="text" name="title" placeholder="Title" required />

  <textarea name="body" placeholder="Content"></textarea>

  <button type="submit">Create Post</button>

</form>

🔄 JavaScript to Submit Form

js

document.getElementById('createForm').addEventListener('submit', async (e) => {

  e.preventDefault();

  const formData = new FormData(e.target);

  const post = {

    title: formData.get('title'),

    body: formData.get('body'),

    userId: 1

  };

  const res = await fetch('https://jsonplaceholder.typicode.com/posts', {

    method: 'POST',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify(post)

  });

  const data = await res.json();

  alert('Post created with ID: ' + data.id);

});

🔎 Real-World Feature #3: Implementing Search with Query Params

Most APIs support search and filtering via query parameters.

💡 Search Endpoint Example

http

GET /api/products?q=shoes&limit=10

🔍 Example: Debounced Search Input

html

<input type="text" id="search" placeholder="Search posts..." />

<ul id="results"></ul>

js

let timeout = null;

document.getElementById('search').addEventListener('input', function (e) {

  clearTimeout(timeout);

  timeout = setTimeout(() => {

    const keyword = e.target.value;

    searchPosts(keyword);

  }, 300);

});

async function searchPosts(q) {

  const res = await fetch(`https://jsonplaceholder.typicode.com/posts?title_like=${q}`);

  const data = await res.json();

  document.getElementById('results').innerHTML = data.map(p => `<li>${p.title}</li>`).join('');

}

📄 Real-World Feature #4: Pagination Using Query Parameters

Paginating API results prevents loading massive datasets at once.

🧱 Example Pagination Structure

html

<div id="userList"></div>

<button onclick="loadUsers(currentPage - 1)">Prev</button>

<button onclick="loadUsers(currentPage + 1)">Next</button>

js

let currentPage = 1;

const limit = 5;

async function loadUsers(page) {

  if (page < 1) return;

  currentPage = page;

  const res = await fetch(`https://jsonplaceholder.typicode.com/users?_page=${page}&_limit=${limit}`);

  const data = await res.json();

  document.getElementById('userList').innerHTML = data.map(user => `<p>${user.name}</p>`).join('');

}

🔃 Real-World Feature #5: Updating and Deleting Records

🖊️ PUT (Update)

js

async function updatePost(id, updatedData) {

  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {

    method: 'PUT',

    headers: { 'Content-Type': 'application/json' },

    body: JSON.stringify(updatedData)

  });

  const data = await res.json();

  console.log('Updated:', data);

}

❌ DELETE

js

async function deletePost(id) {

  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {

    method: 'DELETE'

  });

  if (res.ok) alert('Post deleted');

}

💬 Displaying Feedback to Users

✅ Spinner Example

html

<div id="loader" style="display:none;">Loading...</div>

js

function toggleLoading(state) {

  document.getElementById('loader').style.display = state ? 'block' : 'none';

}

🧠 Best Practices for Building Features with APIs

• ✅ Always validate user input before sending
• ✅ Handle 404, 401, and 500 errors gracefully
• ✅ Prevent multiple submissions with button disabling
• ✅ Cache results where appropriate
• ✅ Always give feedback (loading, success, error)

📊 Feature Table Summary

🧠 Bonus Tips for UX Improvements

✅ Summary

In this chapter, you’ve learned how to:

• Build essential UI features using API data
• Handle GET, POST, PUT, DELETE operations
• Display user-generated content and handle submission
• Implement pagination, search, and real-time filtering
• Display user feedback during network activity
• Handle errors, loading states, and form validations

You’re now equipped to start building real-world applications that rely heavily on external APIs and live data!