JavaScript | Fetching data from a REST API and filtering it using HTML textbox

In this tutorial, we will learn how to fetch data from a REST API using JavaScript and then filter the data based on user input in an HTML textbox.

Step 1: Fetching Data from a REST API

First, we need to fetch data from a REST API. We can do this using the JavaScript Fetch API. Here’s an example code snippet:

        
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
    // Do something with the data
    console.log(data);
})
.catch(error => {
    console.error('Error fetching data:', error);
});
        
    

Step 2: Filtering Data using HTML Textbox

Next, we will add an HTML textbox where users can enter their search query to filter the data. We will use JavaScript to filter the data based on the user input. Here’s an example code snippet:

        




document.getElementById('searchInput').addEventListener('input', function() {
    let searchQuery = this.value.toLowerCase();
    let filteredData = data.filter(item => item.toLowerCase().includes(searchQuery));

    let dataList = document.getElementById('dataList');
    dataList.innerHTML = '';

    filteredData.forEach(item => {
        let li = document.createElement('li');
        li.textContent = item;
        dataList.appendChild(li);
    });
});

        
    

With this code snippet, as users type in the search input, the data will be filtered in real-time and displayed in a list below the textbox.

Conclusion

By following these steps, you can fetch data from a REST API using JavaScript and filter it based on user input using an HTML textbox. This can be useful for creating dynamic search functionality in your web applications.