Skip to content
This repository was archived by the owner on Jan 4, 2023. It is now read-only.

DevelopmentGuide/fetch-CRUD

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 

Repository files navigation

Fetch CRUD

Demo of CRUD operations from Fetch

Get started

  1. Run the backend

  2. Open index.html and click on particular operations

  3. Refer console for details of both working and code

image

  1. NOTE:

    • for update and delete operations you require ID

      image

    • You can get it from console

    • Paste that id in var ID of app.js

Screenshots

image

image

CRUD Operations

  • Create
  • Read
  • Update
  • Delete

CREATE

function create_() {
  fetch(URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(DATA1),
  });
  var msg = "create successful";
  console.log(msg);
  htmlOutput(msg);
}

READ

GET EACH ELEMENT (UNORDERED)
function read_all() {
  fetch(URL)
    .then((response) => response.json())
    .then((data) => {
      console.log("success!");
      console.log(data);
      htmlOutput(data);
    });
}
GET EACH ELEMENT BY JSON
function read_one() {
  fetch(URL)
    .then((response) => response.json())
    .then((data) => {
      for (let i = 0; i < data.length; i++) {
        console.log("success!");
        htmlOutput(data[i].name);
      }
    });
}

UPDATE

function update_() {
  fetch(URL + ID, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(DATA2),
  });
  var msg = "update successful";
  console.log(msg);
  htmlOutput(msg);
}

DELETE

function delete_() {
  fetch(URL + ID, {
    method: "DELETE",
  });
  var msg = "delete successful";
  console.log(msg);
  htmlOutput(msg);
}

AJAX

Also refer AJAX-CRUD

References