/fetch-CRUD

Demo of CRUD operations from Fetch

Primary LanguageHTML

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