What is Fetch API<\/h2>\n\n\n\n
The Fetch API is a built-in JavaScript interface that enables fetching resources asynchronously across the network. It provides a simplified, promise-based syntax for making HTTP requests, allowing developers to send and receive data from servers with ease. The Fetch API supports a wide range of data formats, including JSON, text, blobs, and more.<\/p>\n\n\n\n
How to Make a Fetch Request<\/h2>\n\n\n\n
Using the Fetch API is straightforward. To initiate a basic fetch request, we create a new instance of the We can then use the Response object’s methods to handle the retrieved data. For example, we can call Now, back to our example. What we want to do is create a simple HTML page and using just a bit of Bootstrap. We will show the Bootstrap spinner for the waiting period.<\/p>\n\n\n\n Next, we will define our Async function.<\/p>\n\n\n\n Next, we need to call the getapi<\/em><\/strong> function.<\/p>\n\n\n\n Now, you should be able to see some data in your developer console.<\/p>\n\n\n\n Next, we iterate over the data and display them in the HTML tag.<\/p>\n\n\n\n Now, we want to tie our function to the load<\/em><\/strong> event listener so that when the page loads, the function starts to run. <\/p>\n\n\n\n Here’s the full code:<\/p>\n\n\n\n <\/p>\n\n\n\n <\/p>\n\n\n\nfetch()<\/code> function and pass in the URL of the resource we want to fetch. The fetch()<\/code> function returns a Promise that resolves to the Response object containing the server’s response.<\/p>\n\n\n\nresponse.json()<\/code> to extract JSON data, response.text()<\/code> to get plain text, or response.blob()<\/code> to retrieve binary data. These methods also return Promises, allowing us to chain them together or use async\/await syntax for cleaner code.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n <head>\n <meta charset=\"utf-8\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa\/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl\/vI1Bx\" crossorigin=\"anonymous\">\n <title><\/title>\n <\/head>\n <body>\n <div class=\"container\">\n <center>\n <div class=\"spinner-border\" role=\"status\" id=\"loading\"><\/div>\n <\/center>\n <div class=\"row row-cols-1 row-cols-md-3 g-4\" id=\"data\"><\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<script> \nconst api_url =\n \"https:\/\/catfact.ninja\/breeds\";\n\n\/\/ Defining async function\n async function getapi(url) {\n\n \/\/ Storing response\n const response = await fetch(url);\n\n \/\/ Storing data in form of JSON\n var data = await response.json();\n console.log(data);\n if (response) {\n hideloader();\n }\n show(data);\n}\n<\/script><\/code><\/pre>\n\n\n\n\/\/ Calling that async function\ngetapi(api_url);<\/code><\/pre>\n\n\n\n![\"Javascript](\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2023\/06\/Screen-Shot-2023-06-06-at-10.01.28-PM.png\")
<\/figure>\n\n\n\n\/\/ Loop to access all rows\n for (let item of data.data) {\n \/\/ let description = item.course_description.substring(0, 100).concat('...')\n tab += `\n <div class=\"col-12 col-md-6 mb-6 col-lg-4 d-flex\">\n <div class=\"card shadow-light-lg mb-6 mb-md-0 lift lift-lg\">\n <div class=\"card-body position-relative\">\n <div class=\"position-relative text-right mt-n8 mr-n4 mb-3\">\n <span class=\"badge badge-pill badge-success\">\n <span class=\"h6 text-uppercase\"><i class=\"fa fa-check\"><\/i><\/span>\n <\/span>\n <\/div>\n\n <h3 class=\"text-capitalize\" style=\"font-family:poppins\" >\n ${item.breed}\n <\/h3>\n\n <p class=\"text-muted\">\n ${item.country}\n <\/p>\n\n <p>${item.origin}<\/p>\n\n <\/div>\n <\/div>\n <\/div>\n `;\n }\n \/\/ Setting innerHTML as tab variable\n document.getElementById(\"data\").innerHTML = tab;\n}<\/code><\/pre>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\" dir=\"ltr\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa\/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl\/vI1Bx\" crossorigin=\"anonymous\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <title>Modern Cat Breeds<\/title>\n <style>\n :root {\n --primary: #6C63FF;\n --primary-light: #8A84FF;\n --secondary: #FF6584;\n --dark: #2A2D3E;\n --light: #F7F9FC;\n --gray: #8C8E9A;\n }\n \n body {\n font-family: 'Poppins', sans-serif;\n background-color: var(--light);\n color: var(--dark);\n line-height: 1.6;\n }\n \n .navbar {\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\n box-shadow: 0 4px 12px rgba(108, 99, 255, 0.15);\n }\n \n .hero-section {\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\n color: white;\n padding: 80px 0;\n margin-bottom: 40px;\n border-radius: 0 0 30px 30px;\n }\n \n .card {\n border: none;\n border-radius: 16px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n transition: all 0.3s ease;\n overflow: hidden;\n height: 100%;\n }\n \n .card:hover {\n transform: translateY(-8px);\n box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);\n }\n \n .card-header {\n background: linear-gradient(135deg, var(--primary), var(--primary-light));\n color: white;\n border: none;\n padding: 16px 20px;\n font-weight: 600;\n }\n \n .card-body {\n padding: 24px;\n }\n \n .country-flag {\n display: inline-block;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: var(--secondary);\n color: white;\n text-align: center;\n line-height: 24px;\n font-size: 12px;\n margin-right: 8px;\n }\n \n .spinner-border {\n width: 3rem;\n height: 3rem;\n color: var(--primary);\n }\n \n .footer {\n background-color: var(--dark);\n color: white;\n padding: 40px 0;\n margin-top: 60px;\n }\n \n .stats-container {\n background: white;\n border-radius: 16px;\n padding: 24px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);\n margin-bottom: 30px;\n }\n \n .stat-number {\n font-size: 2.5rem;\n font-weight: 700;\n color: var(--primary);\n }\n \n .stat-label {\n font-size: 0.9rem;\n color: var(--gray);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n \n .search-container {\n max-width: 500px;\n margin: 0 auto 30px;\n }\n \n .search-box {\n border-radius: 50px;\n padding: 12px 24px;\n border: 1px solid #e0e0e0;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);\n }\n \n .search-box:focus {\n border-color: var(--primary);\n box-shadow: 0 4px 12px rgba(108, 99, 255, 0.15);\n }\n \n .no-results {\n text-align: center;\n padding: 40px;\n color: var(--gray);\n }\n \n .no-results i {\n font-size: 3rem;\n margin-bottom: 16px;\n color: #e0e0e0;\n }\n <\/style>\n <\/head>\n <body>\n <!-- Navigation -->\n <nav class=\"navbar navbar-expand-lg navbar-dark\">\n <div class=\"container\">\n <a class=\"navbar-brand fw-bold\" href=\"#\">\n <i class=\"fas fa-paw me-2\"><\/i>Codeflare CatBreeds\n <\/a>\n <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\">\n <span class=\"navbar-toggler-icon\"><\/span>\n <\/button>\n <div class=\"collapse navbar-collapse\" id=\"navbarNav\">\n <ul class=\"navbar-nav ms-auto\">\n <li class=\"nav-item\">\n <a class=\"nav-link active\" href=\"#\">Home<\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">Breeds<\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">About<\/a>\n <\/li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"#\">Contact<\/a>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/nav>\n\n <!-- Hero Section -->\n <section class=\"hero-section\">\n <div class=\"container text-center\">\n <h1 class=\"display-4 fw-bold mb-3 text-light\">Discover Cat Breeds<\/h1>\n <p class=\"lead mb-4 text-light\">Explore the fascinating world of feline breeds from around the globe<\/p>\n <div class=\"search-container\">\n <div class=\"input-group search-box\">\n <span class=\"input-group-text bg-transparent border-0\">\n <i class=\"fas fa-search text-muted\"><\/i>\n <\/span>\n <input type=\"text\" class=\"form-control border-0 bg-transparent\" id=\"searchInput\" placeholder=\"Search cat breeds...\">\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Main Content -->\n <div class=\"container\">\n <!-- Stats Section -->\n <div class=\"row mb-5\">\n <div class=\"col-md-3 col-6\">\n <div class=\"stats-container text-center\">\n <div class=\"stat-number\" id=\"totalBreeds\">0<\/div>\n <div class=\"stat-label\">Total Breeds<\/div>\n <\/div>\n <\/div>\n <div class=\"col-md-3 col-6\">\n <div class=\"stats-container text-center\">\n <div class=\"stat-number\" id=\"totalCountries\">0<\/div>\n <div class=\"stat-label\">Countries<\/div>\n <\/div>\n <\/div>\n <div class=\"col-md-3 col-6\">\n <div class=\"stats-container text-center\">\n <div class=\"stat-number\" id=\"uniqueOrigins\">0<\/div>\n <div class=\"stat-label\">Unique Origins<\/div>\n <\/div>\n <\/div>\n <div class=\"col-md-3 col-6\">\n <div class=\"stats-container text-center\">\n <div class=\"stat-number\" id=\"avgCoat\">0<\/div>\n <div class=\"stat-label\">Avg. Coat Length<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Loading Spinner -->\n <div class=\"text-center py-5\" id=\"loading\">\n <div class=\"spinner-border\" role=\"status\">\n <span class=\"visually-hidden\">Loading...<\/span>\n <\/div>\n <p class=\"mt-3 text-muted\">Loading cat breeds...<\/p>\n <\/div>\n\n <!-- Breeds Grid -->\n <div class=\"row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4\" id=\"data\"><\/div>\n \n <!-- No Results Message -->\n <div class=\"no-results d-none\" id=\"noResults\">\n <i class=\"fas fa-search\"><\/i>\n <h4>No breeds found<\/h4>\n <p>Try adjusting your search terms<\/p>\n <\/div>\n <\/div>\n\n <!-- Footer -->\n <footer class=\"footer\">\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-md-6\">\n <h5><i class=\"fas fa-paw me-2\"><\/i>Codeflare CatBreeds<\/h5>\n <p class=\"mt-3\">Discover and learn about various cat breeds from around the world.<\/p>\n <\/div>\n <div class=\"col-md-3\">\n <h5>Quick Links<\/h5>\n <ul class=\"list-unstyled\">\n <li><a href=\"#\" class=\"text-light text-decoration-none\">Home<\/a><\/li>\n <li><a href=\"#\" class=\"text-light text-decoration-none\">Breeds<\/a><\/li>\n <li><a href=\"#\" class=\"text-light text-decoration-none\">About<\/a><\/li>\n <li><a href=\"#\" class=\"text-light text-decoration-none\">Contact<\/a><\/li>\n <\/ul>\n <\/div>\n <div class=\"col-md-3\">\n <h5>Connect<\/h5>\n <div class=\"d-flex mt-3\">\n <a href=\"#\" class=\"text-light me-3\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\" class=\"text-light me-3\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"#\" class=\"text-light me-3\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"#\" class=\"text-light\"><i class=\"fab fa-github\"><\/i><\/a>\n <\/div>\n <\/div>\n <\/div>\n <hr class=\"my-4\">\n <div class=\"text-center\">\n <p>© 2025 Codeflare CatBreeds. All rights reserved.<\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\"><\/script>\n <script>\n window.addEventListener('load', (event) => {\n const api_url = \"https:\/\/catfact.ninja\/breeds\";\n let allBreeds = [];\n\n \/\/ Defining async function\n async function getapi(url) {\n \/\/ Storing response\n const response = await fetch(url);\n\n \/\/ Storing data in form of JSON\n var data = await response.json();\n console.log(data);\n if (response) {\n hideloader();\n }\n allBreeds = data.data;\n updateStats(allBreeds);\n show(allBreeds);\n }\n\n \/\/ Calling that async function\n getapi(api_url);\n\n \/\/ Function to hide the loader\n function hideloader() {\n document.getElementById('loading').style.display = 'none';\n }\n\n \/\/ Update stats\n function updateStats(breeds) {\n document.getElementById('totalBreeds').textContent = breeds.length;\n \n const countries = [...new Set(breeds.map(item => item.country))];\n document.getElementById('totalCountries').textContent = countries.length;\n \n const origins = [...new Set(breeds.map(item => item.origin))];\n document.getElementById('uniqueOrigins').textContent = origins.length;\n \n \/\/ Calculate average coat length (mock data since API doesn't provide this)\n const avgCoat = (breeds.length \/ 3).toFixed(1);\n document.getElementById('avgCoat').textContent = avgCoat;\n }\n\n \/\/ Function to define innerHTML for HTML table\n function show(data) {\n let tab = ``;\n\n \/\/ Loop to access all rows\n for (let item of data) {\n \/\/ Get first two letters of country for flag icon\n const countryCode = item.country.substring(0, 2).toUpperCase();\n \n tab += `\n <div class=\"col\">\n <div class=\"card h-100\">\n <div class=\"card-header d-flex justify-content-between align-items-center\">\n <span>${item.breed}<\/span>\n <span class=\"country-flag\">${countryCode}<\/span>\n <\/div>\n <div class=\"card-body\">\n <div class=\"mb-3\">\n <small class=\"text-muted\">Country<\/small>\n <p class=\"mb-0\">${item.country}<\/p>\n <\/div>\n <div class=\"mb-3\">\n <small class=\"text-muted\">Origin<\/small>\n <p class=\"mb-0\">${item.origin}<\/p>\n <\/div>\n <div>\n <small class=\"text-muted\">Coat<\/small>\n <p class=\"mb-0\">${item.coat || 'Medium'}<\/p>\n <\/div>\n <\/div>\n <div class=\"card-footer bg-transparent border-0 pt-0\">\n <button class=\"btn btn-sm btn-outline-primary\">Learn More<\/button>\n <\/div>\n <\/div>\n <\/div>`;\n }\n \n \/\/ Setting innerHTML as tab variable\n document.getElementById(\"data\").innerHTML = tab;\n \n \/\/ Show no results message if no data\n if (data.length === 0) {\n document.getElementById('noResults').classList.remove('d-none');\n } else {\n document.getElementById('noResults').classList.add('d-none');\n }\n }\n\n \/\/ Search functionality\n document.getElementById('searchInput').addEventListener('input', function(e) {\n const searchTerm = e.target.value.toLowerCase();\n const filteredBreeds = allBreeds.filter(item => \n item.breed.toLowerCase().includes(searchTerm) || \n item.country.toLowerCase().includes(searchTerm) ||\n item.origin.toLowerCase().includes(searchTerm)\n );\n show(filteredBreeds);\n });\n });\n <\/script>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
![\"javascript](\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2023\/06\/Screen-Shot-2023-06-07-at-12.40.22-AM-1024x586.png\")
<\/figure>\n\n\n\n