GET, POST, PUT, DELETE handlers in Svelte - Mini Project: Build & Apply

GET, POST, PUT, DELETE handlers

📖 Scenario: You are building a simple Svelte app to manage a list of books. You want to practice handling data operations like fetching the list, adding a new book, updating a book, and deleting a book using Svelte's reactive features and fetch API.

🎯 Goal: Create a Svelte component that handles GET, POST, PUT, and DELETE requests to manage a list of books. You will set up the initial data, configure the API endpoint, implement the core logic for each HTTP method, and complete the component with buttons to trigger these actions.

📋 What You'll Learn

Create a reactive variable books initialized as an empty array

Create a constant apiUrl with the value "/api/books"

Write async functions getBooks(), addBook(), updateBook(), and deleteBook() that use fetch with the correct HTTP methods

Add buttons in the Svelte component to call each function and update the books list accordingly

💡 Why This Matters

🌍 Real World

Managing data with GET, POST, PUT, DELETE requests is common in web apps for CRUD operations like managing books, users, or products.

💼 Career

Understanding how to handle HTTP methods in frontend frameworks like Svelte is essential for building interactive, data-driven applications in real jobs.

1

Setup initial data variable

Create a reactive variable called books and initialize it as an empty array [].

Svelte

# Your code here



// Your code here

Hint

Use let books = []; inside the <script> tag to create a reactive variable.

2

Add API URL configuration

Add a constant called apiUrl and set it to the string "/api/books" inside the <script> tag below the books variable.

Svelte

  let books = [];

  // Add the apiUrl constant below
  // Your code here

Hint

Use const apiUrl = "/api/books"; to store the API endpoint.

3

Implement GET, POST, PUT, DELETE functions

Inside the <script> tag, write four async functions: getBooks(), addBook(), updateBook(), and deleteBook(). Use fetch with the correct HTTP methods: GET for getBooks(), POST for addBook(), PUT for updateBook(), and DELETE for deleteBook(). Update the books variable with the fetched or updated data accordingly. For addBook() and updateBook(), send a JSON body with a book object having id and title. For deleteBook(), send the book id in the URL.

Svelte

  let books = [];
  const apiUrl = "/api/books";

  // Write async functions getBooks, addBook, updateBook, deleteBook here
  // Your code here

Hint

Use fetch with the correct method option and update books with the JSON response.

4

Add buttons to trigger HTTP methods

In the Svelte component, below the <script> tag, add four buttons with the text Get Books, Add Book, Update Book, and Delete Book. Attach on:click event handlers to call the respective functions getBooks(), addBook(), updateBook(), and deleteBook(). Also, display the list of book titles in an unordered list <ul> with each book in a <li>.

Svelte

  let books = [];
  const apiUrl = "/api/books";

  async function getBooks() {
    const res = await fetch(apiUrl);
    books = await res.json();
  }

  async function addBook() {
    const newBook = { id: Date.now(), title: "New Book" };
    const res = await fetch(apiUrl, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(newBook)
    });
    books = await res.json();
  }

  async function updateBook() {
    if (books.length === 0) return;
    const bookToUpdate = { ...books[0], title: "Updated Book" };
    const res = await fetch(`${apiUrl}/${bookToUpdate.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(bookToUpdate)
    });
    books = await res.json();
  }

  async function deleteBook() {
    if (books.length === 0) return;
    const idToDelete = books[0].id;
    const res = await fetch(`${apiUrl}/${idToDelete}`, {
      method: "DELETE"
    });
    books = await res.json();
  }

Hint

Add buttons with on:click handlers and use {#each} block to list book titles.