How Data Gets Through API from JavaScript

Certainly! Friendly Faux API is a developer-friendly free platform, a special place where they can test and improve their applications without spending any money. It's a platform crafted to be easy for developers to use, providing a comfortable environment to try out different things. Let's take a closer look at examples of GET, POST, DELETE, UPDATE and Pagination with Searching and Sorting APIs to see how developers can really take advantage of this welcoming space.

Fetching Data: A Simple Guide to GET API in JavaScript for Faux API

Certainly! Let's break down the concepts of fetching API data using fetch methods in the Faux API tool, covering the three methods mention

Introduction:

The Faux API tool offers three methods for fetching data using fetch methods. These methods assist developers in fetching information from the API based on their specific needs. With this method, developers can retrieve all available data from a particular table, facilitating API web development server.

1. GET all Data:

In this method, developers can retrieve all the data stored in a specific table. Think of it as receiving a complete list of books from a library. The API URL structure looks like this:

a. GET all data from a Single API:

b. GET Joined Data from Two APIs:

    fetch(<API URL>, 
    { 
        method: 'GET',
        headers: {
            // Include Authorization headers if required
            'Authorization': 'Bearer YOUR_TOKEN_HERE',
        }
    }) 
    .then(response => response.json())
    .then(data => {
    // Do something with the fetched data 
    console.log(data);
    })
    .catch(error => {
    // Handle errors if the fetch request failsbr>
    console.error('Error:', error);
    });

Here, <apiName_tokenNo> represents the specific table from which you want to retrieve all the data. For instance, if you're working with a API named "Books," the URL would be serve/ serve/books _tokenNo.

2. GET only single data by ID and GET join data of two API:

This method allows developers to fetch a single piece of data by specifying its unique ID. It's similar to checking out a specific book from the library. The API URL structure is:

a. GET single data by ID:

b. GET Joined Data from Two APIs by ID:

    fetch(<API URL>, 
    { 
        method: 'GET',
        headers: {
            // Include Authorization headers if required
            'Authorization': 'Bearer YOUR_TOKEN_HERE',
        }
    })  
    .then(response => response.json())
    .then(data => {
    // Do something with the fetched data 
    console.log(data);
    })
    .catch(error => {
    // Handle errors if the fetch request fails 
    console.error('Error:', error);
    });

Here, <apiName_tokenNo> is again the name of the table, and <id> is the unique identifier of the data you want to retrieve. For example, if you want details about a book with ID 123, the URL would be:

3. GET: Filter data using optional search parameters — choose one or many as needed.

This method enables developers to fetch data based on a specific filter, allowing for more refined searches.

Imagine you're in a library. You don’t want to see all books — you want:

• Books by a specific author (e.g., Alice Walker)

• Or only books in a certain genre (e.g., science fiction)

• Or maybe books written in the year 2000

Instead of checking every shelf manually, you use the library's search system and enter filters (author name, genre, year). It shows you only what you asked for.

In API Terms
That same concept applies to your API:

a. GET Data from a Single API Using Filters:

b. GET Joined Data from Two APIs Using Filters:

Default parameters

In this no need to mention all default paramaters like searchMode=OR.

Only pagination

Only sorting

All Query Parameters (Explained with Defaults)

🔥Example API: users

🔹 Using OR

• name = 'Alice'

• role = 'user'

• globalSearch = 'trainer'

• Search Mode: OR (By default apply)

✅ Meaning:

Return users where either: name is "Alice" OR role is "user" OR globalSearch = 'trainer'

const params = new URLSearchParams({
"name": "Alice",
"role": "user",
"globalSearch": "trainer"
});

fetch(`<API URL>?${params.toString()}`,
{ 
    method: 'GET',
    headers: {
        // Include Authorization headers if required
        'Authorization': 'Bearer YOUR_TOKEN_HERE',
    }
}) 
.then(response => response.json())
.then(data => {
    console.log(data); // Process the fetched data
})
.catch(error => {
    console.error('Error:', error); // Handle any errors
});
    

🟢 Result:

✅ All 4 records can match if at least one of the values (e.g., role or name) is found in each row.

✅ Global Search Behavior

=> When you use: globalSearch=trainer

=> It performs a broad match across all fields.

Even if the value you searched is:

• "trainer"

• and the record has "trainers" (with s at the end)

🔹 Using AND

• name = 'Alice'

• role = 'admin'

• globalSearch = 'active'

• searchMode = AND

✅ Meaning:

Return users where both: name is "Alice" AND role is "admin" AND globalSearch = 'active'

const params = new URLSearchParams({
"name": "Alice",
"role": "admin",
"globalSearch": "active",
"searchMode": "AND"
});

fetch(`<API URL>?${params.toString()}`, 
{ 
    method: 'GET',
    headers: {
        // Include Authorization headers if required
        'Authorization': 'Bearer YOUR_TOKEN_HERE',
    }
}) 
.then(response => response.json())
.then(data => {
    console.log(data); // Process the fetched data
})
.catch(error => {
    console.error('Error:', error); // Handle any errors
});
    

🟢 Result:

✅ Only 1 record matches all conditions. This means all filters must match within the same row.

✅ Global Search Behavior

=> When you use: globalSearch=active

=> It performs a broad match across all fields that contain the value "active".

🔹 Using Pagination, sortBy, and sortOrder

For details on how to implement sorting and pagination with sortBy and sortOrder parameters, especially when using searchMode: OR, please refer to our Pagination and sorting Guide.

Explanation in Simple Terms:

Think of it like browsing through a library (represented by the Faux API), where books are neatly organized on different shelves (tables). You can utilize these methods to navigate through the library with ease.

Getting All Data:

It's akin to wandering through the entire library and browsing every book on the shelves.

Getting Single Data by ID:

It's like going to a particular shelf, selecting a book by its unique ID, and reading its contents

About the Filter Section

Filters let developers narrow down results from a large dataset by adding search parameters. These parameters are added in the API URL as a query string.

Here’s what each filter means in simple terms:

🧰 Explanation of Filter Parameters (Simple):