Pricing

Documentation

Sign in

Use with JavaScript

Integrating the API with Your JavaScript Project

Seamless Integration of App Backend API: Empower Your Project Across Various Technologies and Platforms with Ease. Integrating the API with Your JavaScript Project for Seamless Data Integration and Functionality.

We will make a simple directory app of users.

User App

And Table data looks like this.

User App Table

Setting up the HTML Structure:

To begin, let's set up the basic HTML structure for our webpage. We'll create an input field for searching users, a search button, and a container to display the user cards.

<!DOCTYPE html>
<html>
    <head>
        <title>User List</title>
        <!-- Include necessary CSS stylesheets here -->
    </head>
    <body>
        <div id="search-container">
            <input id="search-input" type="text" placeholder="Search users..." />
            <button id="search-button">Search</button>
        </div>

        <div id="user-list"></div>

        <!-- Include JavaScript code here -->
    </body>
</html>

Fetching Users from the API:

Using JavaScript, we'll define a function called fetchUsers to retrieve user data from the API. This function will make a GET request to the API endpoint and handle the response using the fetch API.

// Fetch users from the API
function fetchUsers(searchTerm = "") {
    // API endpoint URL
    let apiUrl = `https://v1.appbackend.io/v1/rows/wNqz0X6nz6pr`;

    if (searchTerm)
        apiUrl = `https://v1.appbackend.io/v1/rows/wNqz0X6nz6pr/search?q=${encodeURIComponent(searchTerm)}`;

    // Fetch user data from the API
    fetch(apiUrl)
        .then((response) => response.json())
        .then((users) => {
            if (searchTerm) {
                renderUserCards(users.hits);
            } else {
                renderUserCards(users.data);
            }
        })
        .catch((error) => {
            console.error("Error fetching users:", error);
        });
}

Rendering User Cards:

Next, we'll create a function called renderUserCards to dynamically generate HTML elements for each user. This function will receive an array of user objects and iterate over them to create user cards. Each user card will contain information such as the user's image, name, age, and a brief description.

// Create a user card element
function createUserCard(user) {
    const card = document.createElement("div");
    card.classList.add("user-card");

    const image = document.createElement("img");
    image.src = user.attachment;
    image.alt = user.name;
    card.appendChild(image);

    const name = document.createElement("h2");
    name.textContent = user.name;
    card.appendChild(name);

    const age = document.createElement("span");
    age.textContent = `Age: ${user.age}`;
    card.appendChild(age);

    const about = document.createElement("p");
    about.textContent = user.about;
    card.appendChild(about);

    return card;
}

    // Render the user cards
function renderUserCards(users) {
    const userList = document.getElementById("user-list");
    userList.innerHTML = ""; // Clear existing user cards

    users.forEach((user) => {
        const card = createUserCard(user);
        userList.appendChild(card);
    });
}

Search Functionality:

To implement search functionality, we'll add event listeners to the search button and the input field. When the search button is clicked or the Enter.

Here is the full code → https://codesandbox.io/s/user-list-table-backend-ip6tev

That's all! We have demonstrated the basic usage of the App Backend API to build dynamic apps and add search functionality. By following the steps outlined above, you can fetch user data from the API, render it on your webpage, and enable users to search for specific users based on their input.

Feel free to explore further and enhance your application with additional features and styling. The App Backend API provides a versatile toolset for managing data and integrating it seamlessly into your projects. Happy coding!